Login UI Concept- Flutter

Its been 6 months since I got my hands dirty in Flutter and I absolutely love it. Creating UI on Flutter is very simple when you get used to it.

At first, you may get confused, but then it's as simple as switching from geared car to automatic car (This might clear your confusion)...

With the intro that's entirely out of the way, let's dive into what we are going to create today.

For the sake of understanding, let's divide the screen into two parts.

1. The Upper section- Consisting of Image
2. The Lower part- Consisting of Text Fields and Buttons

The upper and lower section of the login screen is placed inside the StackWidget.

Upper Section

Let's dig into some code and see how it created.

 Container(  
      decoration: BoxDecoration(  
        image: DecorationImage(  
          image: AssetImage('assets/image.jpg'),  
          fit: BoxFit.fitWidth,  
          alignment: Alignment.topCenter)),  
     )  

It consists of a Container Widget with a BoxDecoration widget in it as a decoration parameter. The BoxDecoration further has DecorationImage widget to show the Image.

The Lower Section

Let's look at the code here.

 Container(  
      width: MediaQuery.of(context).size.width,  
      margin: EdgeInsets.only(top: 270),  
      decoration: BoxDecoration(  
       borderRadius: BorderRadius.circular(20),  
       color: Colors.white,  
      ),  
      child: Padding(  
       padding: EdgeInsets.all(23),  
       child: ListView(  
        children: <Widget>[  
         Padding(  
          padding: EdgeInsets.fromLTRB(0, 20, 0, 20),  
          child: Container(  
           color: Color(0xfff5f5f5),  
           child: TextFormField(  
            style: GoogleFonts.robotoSlab(  
             textStyle: TextStyle(  
              color: Colors.black,  
             ),  
            ),  
 //  
            decoration: InputDecoration(  
              border: OutlineInputBorder(),  
              labelText: 'Username',  
              prefixIcon: Icon(Icons.person_outline),  
              labelStyle: TextStyle(fontSize: 15)),  
           ),  
          ),  
         ),  
         Container(  
          color: Color(0xfff5f5f5),  
          child: TextFormField(  
           obscureText: true,  
           style: GoogleFonts.robotoSlab(  
            textStyle: TextStyle(  
             color: Colors.black,  
            ),  
           ),  
           decoration: InputDecoration(  
             border: OutlineInputBorder(),  
             labelText: 'Password',  
             prefixIcon: Icon(Icons.lock_outline),  
             labelStyle: TextStyle(fontSize: 15)),  
          ),  
         ),  
         Padding(  
          padding: EdgeInsets.only(top: 20),  
          child: MaterialButton(  
           onPressed: () {},  
           //since this is only a UI app  
           child: Text(  
            'SIGN IN',  
            style: GoogleFonts.lato(  
             textStyle: TextStyle(  
              fontSize: 15,  
              color: Colors.white,  
              fontWeight: FontWeight.bold,  
             ),  
            ),  
           ),  
           color: Color(0xffff2d55),  
           elevation: 0,  
           minWidth: 400,  
           height: 50,  
           textColor: Colors.white,  
           shape: RoundedRectangleBorder(  
             borderRadius: BorderRadius.circular(10)),  
          ),  
         ),  
         Padding(  
          padding: EdgeInsets.only(top: 20),  
          child: Center(  
           child: Text(  
            'Forgot your password?',  
            style: GoogleFonts.robotoSlab(  
             textStyle: TextStyle(  
              fontSize: 15,  
              fontWeight: FontWeight.bold,  
              color: Colors.black,  
             ),  
            ),  
           ),  
          ),  
         ),  
         Padding(  
          padding: EdgeInsets.only(top: 30),  
          child: Center(  
           child: RichText(  
            text: TextSpan(children: [  
             TextSpan(  
              text: "Don't have an account?",  
              style: GoogleFonts.robotoSlab(  
               textStyle: TextStyle(  
                fontSize: 15,  
                fontWeight: FontWeight.bold,  
                color: Colors.black,  
               ),  
              ),  
             ),  
             TextSpan(  
              text: "sign up",  
              style: GoogleFonts.robotoSlab(  
               textStyle: TextStyle(  
                color: Color(0xffff2d55),  
                fontSize: 15,  
               ),  
              ),  
             )  
            ]),  
           ),  
          ),  
         )  
        ],  
       ),  
      ),  
     ),  

The lower section consists of a container with a decoration parameter in it to provide the round borders to the container, which in turn has a ListView widget in it. 

The List widget has the widgets arranged in a list with the order as follows.

• TextView for showing "Sign" in text
• TextFormField for taking username input
• TextFormField for taking password input
• MaterialButton for showing the "Sign In" button
• TextView for showing the text "Forgot your password."
• RichText for showing the text "Don't have an account? sign in"

For Text styling, I have used google fonts. You can have a look at it here.

The source code for the whole screen is as follows or you can visit my Github repo.

We have reached the end of this post, If you have any questions about any of the widgets use, ask me in the comment sections.