Simple Login Page in Flutter

Lets see how to create a simple login page using dart programming language, so under lib i am creating an dart file named login_screen.dart

So under that login_screen i am creating an class name LoginScreen which extends StatefulWidget an abstract class . A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface.

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

Bottom of the same file after the LoginScreen Class i am creating another class named _LoginScreenState which extends State<LoginScreen> so i have a Widget Build Override Method where we declare our widgets parts or UI.

@override
Widget build(BuildContext context) {
}

I just pasted the entire code for login_screen.dart below . Lets see steps by step what is the use off each widgets

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 15,vertical: 20),
            child: Center(
              child: Column(
                children: [
                  Text("Welcome", style: TextStyle(fontSize: 30, color: Colors.black)),
                  Text("Sign In To Continue", style: TextStyle(fontSize: 20, color: Colors.red)),
                  SizedBox(height: 15,),
                  TextField(decoration: InputDecoration(labelText: "Email ID",
                  labelStyle: TextStyle(fontSize: 15,color: Colors.green),
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))),
                  ),
                  SizedBox(height: 15,),
                  TextField(obscureText:true,
                      decoration: InputDecoration(labelText: "Password",
                      labelStyle: TextStyle(fontSize: 15,color: Colors.green),
                      border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))),
                  ),
                  SizedBox(height: 15,),
                  Align(
                    alignment: Alignment.bottomRight,
                    child:Text("Forgot Password?", style: TextStyle(fontSize: 20, color: Colors.black))
                  ),
                  SizedBox(height: 15,),
                  Container(
                    height: size.height / 14,
                    width: size.width,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: Colors.green,
                    borderRadius: BorderRadius.circular(5)),
                    child: Text("Login ",
                    style: TextStyle(color: Colors.white,
                    fontWeight: FontWeight.bold))
                  )
                ],
              ),
            )
        )
     )
    );
  }
}

So first we have Scaffold → which contains widgets helps in designing the basic material design such as appbar , naviagtionDrawer and bottomBar and so on.It occupy the screen size as per the mobile size.

Next comes SafeArea → by default alignment moved at the top which overlaps notch or appbar . so in order to start after appbar we use this SafeArea . A widget that insets its child by sufficient padding to avoid intrusions by the operating system. The Required field for SafeArea is child so now the childs holds the container where we are going to put or widgets like Text and InputFields.

So the Column → is for vertical Arrangement of Views.

Text("Welcome", style: TextStyle(fontSize: 30, color: Colors.black))

So for designing text in Flutter you can see above line which holds style and text. So inside style we have several option like color,size,fontweight and so on..

And for SizedBox(height: 15,), — -> is space between two views and the height is 15

And TextField → is for the input field

TextField(decoration: InputDecoration(labelText: "Email ID",
labelStyle: TextStyle(fontSize: 15,color: Colors.green),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))),
),

And from main.dart we will be calling the LoginScreen

import 'package:flutter/material.dart';

import 'login_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: LoginScreen(),
    );
  }
}

Final output will be like the below one