Today I'm discuss about the a very important topic for Android development that topic is :-
How to design login and Signup or Register Page in flutter Android || Programmer hubs just for programmer||Programmer Rohit Sharma
Let’s start open the vscode and
create a Project
1. Add some
dependency pubsec.yaml
google_fonts: ^1.0.0
http: ^0.12.2
Now open main.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';]
import 'package:my_coaching/widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: appBar(context),
elevation: 0.0,
brightness: Brightness.light,
backgroundColor: Colors.white10,
),
body: SafeArea(
child: HomePage(),
),
),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool signin = true;
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Icon(
Icons.account_circle,
size: 50.0,
color: Colors.lightBlue,
),
boxUi(),
],
),
),
);
}
//that method for changing state for float button activity void changeState() {
if (signin) {
setState(() {
signin = false;
});
} else {
setState(() {
signin = true;
});
}
}
Widget boxUi() {
return Card(
elevation: 10.0,
margin: EdgeInsets.all(10.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
onPressed: () => changeState(),
child: Text(
'SIGN IN',
style: GoogleFonts.varela(
color: signin == true ? Colors.blue : Colors.grey,
fontSize: 15.0,
fontWeight: FontWeight.bold),
),
),
FlatButton(
onPressed: () => changeState(),
child: Text(
'SIGN UP',
style: GoogleFonts.varela(
color: signin != true ? Colors.blue : Colors.grey,
fontSize: 15.0,
fontWeight: FontWeight.bold),
),
),
],
),
signin == true ? signinUI() : singupUI(),//segment check for condition
],
),
);
}
Widget signinUI() {
return Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.account_box),
hintText: 'Enter Email',
labelText: 'E-mail',
),
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.account_box),
hintText: 'Enter Pass',
labelText: 'Password',
),
keyboardType: TextInputType.visiblePassword,
),
FlatButton(
onPressed: () {},
child: Text(
'SIGN IN',
style: GoogleFonts.varelaRound(
color: Colors.green, fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 1.2,
color: Colors.grey,
),
FlatButton(
onPressed: () {},
child: Text(
'CANCEL',
style: GoogleFonts.varelaRound(
color: Colors.red, fontWeight: FontWeight.bold),
),
),
],
);
}
Widget singupUI() {
return Column(
mainAxisSize: MainAxisSize.max,
verticalDirection: VerticalDirection.down,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.text_fields),
hintText: 'Enter Name',
labelText: 'Name',
),
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.account_box),
hintText: 'Enter Email',
labelText: 'E-mail',
),
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
hintText: 'Enter Pass',
labelText: 'Password',
),
),
FlatButton(
onPressed: () {},
child: Text(
'SIGN UP',
style: GoogleFonts.varelaRound(
color: Colors.green, fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 1.2,
color: Colors.grey,
),
FlatButton(
onPressed: () {},
child: Text(
'CANCEL',
style: GoogleFonts.varelaRound(
color: Colors.red, fontWeight: FontWeight.bold),
),
),
],
);
}
}
Output Here:-
0 Comments
thanks for your suggestion and improving quality of the content