Thursday, June 18, 2020


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.
Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: