Hlo guys this is shivam , And i am here to teach u how to make sign up page in flutter so lets Start with basics .
First we simply make our main pages and add a page in the main .
Here it is steteful widgets used in flutter
class Sign extends StatefulWidget {
const Sign({super.key});
@override
State<Sign> createState() => _SignState();
}
class _SignState extends State<Sign> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
void dispose(){
_usernameController.dispose();
_passwordController.dispose();
_emailController.dispose();
super.dispose();
}
In this widgets first we make our logic so we add some logic
Form key = First we make final key to add form type contanairs
then
Texteditingcontroller = This widgets help to add and run the widgets of Any type of widgets
so we add email,pass and username,
Dispose it is mailny ues for controll the function like textediting controller and animationcontroller .
if u r using this function so u have to know that always used super.dispose function in the end of the function;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Sign up Page',style: TextStyle(fontSize: 20),),
backgroundColor: Colors.purple,
),
body: Padding(padding:
EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: _usernameController,
decoration: InputDecoration(labelText: 'Username',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(15))
),
validator: (value) {
if(value == null || value.isEmpty){
return 'username cannot be empty';
}
return null;
},
),
SizedBox(height: 10),
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email ',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(15))
),
validator: (value) {
if (value == null ||value.isEmpty) {
return 'email cannot be empty';
}
return null;
},
),
SizedBox(height: 10,),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(15))
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'paasword cannot be empty';
}
return null;
},
),
SizedBox(height: 20,),
ElevatedButton(onPressed: (){
setState(() {
});
}, child: Text('Sign Up',style: TextStyle(fontSize: 20,color: Colors.black),),
style: ElevatedButton.styleFrom(
shadowColor: Colors.purple,
backgroundColor: Colors.green,
padding: EdgeInsets.symmetric(horizontal: 50,vertical: 15)
),
),
],
),
),
),
);
}
}
In this code we learn previous some widgets so lets learn new .
Form = it is mainly uesd for making form like structure and architecture and we formkey to make this.
Textformfield = Its make the form of the function in this field we add some widegts like controller that are uesd in textform field
Input Decoration that modify the layout of inner body
Label text = means it is the text that we write something so this text appear in the edge of that side
Outlineborder = It is uesd for make the border lines of the textformfield in the outlineside
Validator = it is used for mainly checking the value in the form field
.png)
.png&description=Sign up page in Flutter | Login page in Flutter with full code){kind=link}
0 Comments