Login page Design with Flutter (2024)

Balaji Venkatachalam

Code walkthrough for the Login page

Hey Folks

Welcome back, So today we’ll create the amazing login page using Flutter. So you all know by using Flutter we can create Cross-platform applications like Android, iOS, Desktop, web, and Linux. I’m using an Android studio for creating flutter applications you can use Visual studio also it’s fully up to you. So without further due let’s get into the coding part.

You can see the below image, which will show how does the project directory looks like when you open the Android studio. So here we have to Add the Assets folder where we will store the images which are needed for the project.

So once you added that folder you can’t able to use that images right away you have to set some properties for that (Simply you have to mention the path of that image). To do that you have to open the Pubspec.YAML file in that project directory.

Inside that file, you have to mention that assets file location and here you have to be careful because here the indentation is important. Once you set that path you are good to go. Yeah, you can now use that images on your projects sounds good right 😀

Then you have to open the main. dart file and start working on that coding part. Once you open that file you have the default code just remove that code and use your own which will help you to improve your implementation skills. you can see on this below image I used the MaterialApp widget in that main function. Inside that, you can see I have a home property which is set to be the dart class named Myapp. which is known as a stateful widget.

Lifehack 💡 You can type stf and hit enter to create the stateful widget or if you want to create a stateless widget just type stl and hit enter.

So yeah we completed our first step. Now we can start creating some other widgets inside that Build method which will return the widgets.

double width=MediaQuery.of(context).size.width;
double height=MediaQuery.of(context).size.height;

Here I create some double variables inside that Build method which will give me the current devices screen size and we can use this for creating responsive applications.

return Scaffold(
 body: Container(
 height: height,
 width: width,
 child: SingleChildScrollView()));

Initially, I Created a Scaffold widget and then I created a Container and set that width and height to the screen size, and inside of that container, I use the SingleChildScrollview widget to scroll the widget.

This SingleChildScrollview widget will be sometimes used to avoid overlapping the widgets.

SingleChildScrollView(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Container(
 width: width,
 height: height*0.45,
 child: Image.asset('assets/yoga.png',fit: BoxFit.fill,),
 ),
 Text('Login',style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),

Inside that SingleChildScrollview widget, I Created the Column widget and then I used the Container to store the image and I specify the height to 45% and width to the entire width of the screen. Then I have the Text Widget which will Show the Login Lable with font-weight of bold and size of 25.

 SizedBox(height: 30.0,),
 TextField(
 decoration: InputDecoration(
 hintText: 'Email',
 suffixIcon: Icon(Icons.email),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(20.0),
 ),
 ),
 ),

Here I used some SizedBox widget to provide the space between the top and bottom widget. I specified the height of that SizedBox to 30. Then I created the TextField Widget which will have many properties. Mostly we use the controller and InputDecoration inside that Textfield widget. inside that InputDecoration, we will specify the hint text and suffix icon. some times we specify the border to make this text field more attractive. We use obsecureText property inside that TextField which will helps us to make this text field as a password field.

SizedBox(height: 20.0,),
 TextField(
 obscureText: true,
 decoration: InputDecoration(
 hintText: 'Password',
 suffixIcon: Icon(Icons.visibility_off),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(20.0),
 ),
 ),
 ),

For example, you can see I use obsecureText property inside that password text field. Initially, It’ll be set to false so when we need that feature we have to make that value to true. The controller will help us to hold the user’s input text.

RaisedButton(
 child: Text('Login'),
 color: Color(0xffEE7B23),
 onPressed: (){},
 ),

Here I have the RaisedButton with the Lable of Login and have some color property. When you use that button you must have to specify the Onpressed function else the button will be disabled. Inside the Onpressed function, you can write your actions.

GestureDetector(
 onTap: (){
 Navigator.push(context, MaterialPageRoute(builder: (context)=>Second()));
 },
 child: Text.rich(
 TextSpan(
 text: 'Don\'t have an account',
 children: [
 TextSpan(
 text: 'Signup',
 style: TextStyle(
 color: Color(0xffEE7B23)
 ),
 ),
 ]
 ),
 ),
 ),

Then finally we have the GestureDetector Widget which will identify the user inputs like Double click, on tap, On pressed, Hover, and so on. By using that widget we can use Gesture activities for many widgets. So here I added this Gesture feature to the Text widget. When the user clicks on that text It’ll redirect the user to another page by using Navigator. Navigator will push the new page on top of the current page. Here this Navigator will push the sign-up page.

class Myapp extends StatefulWidget {
 @override
 _MyappState createState() => _MyappState();
}class _MyappState extends State<Myapp> {
 @override
 Widget build(BuildContext context) {
 double width=MediaQuery.of(context).size.width;
 double height=MediaQuery.of(context).size.height;
 return Scaffold(
 body: Container(
 height: height,
 width: width,
 child: SingleChildScrollView(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Container(
 width: width,
 height: height*0.45,
 child: Image.asset('assets/yoga.png',fit: BoxFit.fill,),
 ),
 Padding(
 padding: const EdgeInsets.all(8.0),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.start,
 children: [
 Text('Login',style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
 ],
 ),
 ),
 SizedBox(height: 30.0,),
 TextField(
 decoration: InputDecoration(
 hintText: 'Email',
 suffixIcon: Icon(Icons.email),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(20.0),
 ),
 ),
 ),
 SizedBox(height: 20.0,),
 TextField(
 obscureText: true,
 decoration: InputDecoration(
 hintText: 'Password',
 suffixIcon: Icon(Icons.visibility_off),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(20.0),
 ),
 ),
 ),
 SizedBox(height: 30.0,),
 Padding(
 padding: const EdgeInsets.all(10.0),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: [
 Text('Forget password?',style: TextStyle(fontSize: 12.0),),
 RaisedButton(
 child: Text('Login'),
 color: Color(0xffEE7B23),
 onPressed: (){},
 ),
 ],
 ),
 ),
 SizedBox(height:20.0),
 GestureDetector(
 onTap: (){
 Navigator.push(context, MaterialPageRoute(builder: (context)=>Second()));
 },
 child: Text.rich(
 TextSpan(
 text: 'Don\'t have an account',
 children: [
 TextSpan(
 text: 'Signup',
 style: TextStyle(
 color: Color(0xffEE7B23)
 ),
 ),
 ]
 ),
 ),
 ),
 ],
 ),
 ),
 ),
 );
 }
}

So by using this above code we can create the login screen. The sign-up page also have this same code but with some additional TexrFields. If you have any doubts you can refer my Github page or my Youtube video