Login screen design example with flutter

Create a new flutter project for our login screen. If you are new to flutter please follow this article to create a new flutter project.

After creating the project you will find that our class extends StatelessWidget, here we need StatefulWidget in case we need to update any interaction. If you are not familiar with StatelessWidget/StatefulWidget then please take a look at this article.

Let’s start designing the login screen, our working class will be “main.dart” available under the lib folder.

Our body will contain the main screen ui for login which is as follows.

Main icon(or image)
Username form field
Password form field
Forget password text
Login button
Or(optional text)
Register button
Create an account text

Note: Here i created a login screen and pressing login button will print entered username.

This is how we will program login design. Please refer below code.

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatefulWidget {
 @override
 State createState() {
   return LoginState();
 }
}

class LoginState extends State {
//BOTH THIS LINE IS USED TO GET TEXT FROM FORMFIELD
 TextEditingController userNameController = TextEditingController();
 TextEditingController passWordController = TextEditingController();

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       backgroundColor: Colors.green,//main background color
       body: Container(//contains while screen design
         alignment: Alignment.center,
         child: Padding(
           padding: const EdgeInsets.all(30.0),
           child: SingleChildScrollView(
/*
* THIS SingleChildScrollView CHILD WILL HELP US TO SCROLL UI WHILE KEYBOARD IS OPEN
* OTHERWISE YOU WILL GET 'BOTTOM OVERFLOWED BY 'n' PIXELS WHEN YOU OPEN KEYBOARD
*
* */

             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Icon(
                   Icons.account_circle,
                   size: 80,
                   color: Colors.white,
                 ),
                 TextFormField(
                   controller: userNameController,
                   style: TextStyle(color: Colors.white),
                   decoration: new InputDecoration(
                     hintText: 'Username',
                     hintStyle: TextStyle(color: Colors.white38),
                     enabledBorder: new UnderlineInputBorder(
                       borderSide: new BorderSide(color: Colors.white38),
                     ),
                     focusedBorder: new UnderlineInputBorder(
                       borderSide: BorderSide(color: Colors.white),
                     ),
                   ),
                 ),
                 TextFormField(
                   controller: passWordController,
                   style: TextStyle(color: Colors.white),
                   decoration: new InputDecoration(
                     hintText: 'Password',
                     hintStyle: TextStyle(color: Colors.white38),
                     enabledBorder: new UnderlineInputBorder(
                       borderSide: new BorderSide(color: Colors.white38),
                     ),
                     focusedBorder: new UnderlineInputBorder(
                       borderSide: BorderSide(color: Colors.white),
                     ),
                   ),
                 ),
                 Container(
                   padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                   alignment: Alignment.bottomRight,
                   child: Text(
                     'Forget Password?',
                     style: TextStyle(color: Colors.white),
                   ),
                 ),
                 Container(
                   width: double.infinity,
                   child: RaisedButton(
                     padding: EdgeInsets.all(15),
                     color: Colors.white,
                     textColor: Colors.blue,
                     child: Text(
                       'LOG IN',
                       style: TextStyle(fontWeight: FontWeight.bold),
                     ),
                     onPressed: () {
                       print('Username - ' + userNameController.text);
                     },
                   ),
                 ),
                 Padding(
                   padding: EdgeInsets.all(20),
                   child: Text(
                     'OR',
                     style: TextStyle(color: Colors.white),
                   ),
                 ),
                 Container(
                   width: double.infinity,
                   child: RaisedButton(
                     padding: EdgeInsets.all(15),
                     color: Colors.white,
                     textColor: Colors.red,
                     child: Text(
                       'REGISTER',
                       style: TextStyle(fontWeight: FontWeight.bold),
                     ),
                     onPressed: () {},
                   ),
                 ),
                 Padding(
                   padding: EdgeInsets.all(16.0),
                       child: Text(
                       'Create an account',
                       style: TextStyle(
                           decoration: TextDecoration.underline,
                           color: Colors.white),
                     ),
                 ),
               ],
             ),
           ),
         ),
       ),
     ),
   );
 }
}

Conclusion: This article is published to help with create login screen using form field and understanding it’s properties.

Thank you for reading this article. if you need any help then you can contact us on info@tagnism.com

Leave a Reply Cancel reply