Flutter login page ui – How to create login page with flutter

• admin
• 0
• on Sep 13, 2022

In this section we will use flutter to create a simple login page as the screen sample above

Source Code

import 'package:flutter/material.dart';

class LoginPage1 extends StatelessWidget {
  const LoginPage1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildLoginContent(),
    );
  }

  Widget _buildLoginContent() {
    return Container(
      color: Colors.indigo,
      padding: EdgeInsets.all(50),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            height: 50,
          ),
          CircleAvatar(
            radius: 60,
            backgroundImage: NetworkImage(
                'https://www.designevo.com/res/templates/thumb_small/express-logistics-circle-and-wing.webp'),
          ),
          SizedBox(
            height: 15,
          ),
          Text("KHODECAM",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20,color: Colors.white),),
          SizedBox(
            height: 30,
          ),
          ListTile(
              title: TextField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                    hintText: "Email address:",
                    hintStyle: TextStyle(color: Colors.white70),
                    border: InputBorder.none,
                    icon: Icon(
                      Icons.email,
                      color: Colors.white70,
                    )),
              )),
          Divider(
            color: Colors.grey.shade600,
          ),
          ListTile(
              title: TextField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                    hintText: "Password:",
                    hintStyle: TextStyle(color: Colors.white70),
                    border: InputBorder.none,
                    icon: Icon(
                      Icons.lock,
                      color: Colors.white70,
                    )),
              )),
          Divider(
            color: Colors.grey.shade600,
          ),
          SizedBox(
            height: 20,
          ),
          Row(
            children: <Widget>[
              Text(
                'Forgot your password?',
                style: TextStyle(color: Colors.grey.shade500),
              ),
              Spacer(),
              Container(
                height: 40,
                child: MaterialButton(
                  onPressed: () {},
                  color: Colors.green,
                  child: Text(
                    'Login',
                    style: TextStyle(color: Colors.white, fontSize: 16.0),
                  ),
                ),
              ),
            ],
          ),

        ],
      ),
    );
  }
}