Sign up page in Flutter | Login page in Flutter with full code

Shivam September 23, 2024

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 



Post a Comment

0 Comments