Flutter Login Page UI Design

This Flutter tutorial will teach you how to do the Login Screen.due to current techoligal demend we also created an app you friendly.The app is developed steps ahead of the existing world. While app development will be very useful for the future as well.

Main.dart

import 'package:flutter/material.dart';
import 'package:myapp/view/splash_screen/auth/login_screen.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
      
      ),
      home: Login(),
    );
  }
}

login_screen.dart

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget
 {
  const LoginScreen({ Key key }) : super(key: key);
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            padding:EdgeInsets.symmetric(horizontal: 15,vertical: 20),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Welcome" ,
                     style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold), ),
                     Text("Sign in Continue" ,
                     style: TextStyle(fontSize: 20, color: Colors.grey.shade400 ),
                     ),
                     Center(
                       child: Image.asset('assets/images/lock.png',
                       width: 150,
                       height: 150,),
                     ),
                       SizedBox(height: 15,),
                     TextField(
                      
                       decoration: InputDecoration(
                         labelText: "Email ID",
                         labelStyle: TextStyle(fontSize: 15,color: Colors.grey.shade400),
                         border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
                       ),
                     ),
                     SizedBox(height: 15,),
                      TextField(
                       obscureText: true,
                       decoration: InputDecoration(
                         labelText: "Password",
                         labelStyle: TextStyle(fontSize: 15,color: Colors.grey.shade400),
                         border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
                       ),
                     ),
                      SizedBox(height: 5,),
              Align(
                alignment: Alignment.bottomRight,
                child: Text("Forget Password",
                style: TextStyle(fontSize: 15,fontWeight: FontWeight.normal),),
              ),
               SizedBox(height: 15,),
              GestureDetector(
                onTap: (){},
                child: Container(
                  alignment: Alignment.center,
                  height: size.height / 14,
                  width: size.width,
                  decoration: BoxDecoration(color: Colors.red,
                  borderRadius: BorderRadius.circular(5)),
                  child: Text("Login ", 
                            style: TextStyle(color: Colors.white,
                            fontWeight: FontWeight.bold),),
                ),
              ),
               SizedBox(height: 15,),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("I m new Users " ,
                         style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ),
                  Text("Sign In" ,
                         style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,color: Colors.red ),
                  )
                ],
              ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

in order to add the images. create folder assets inside folder create another folder images.you have to put the images then pubspec.yaml we have to give the path.

  assets:
     - assets/images/