Coders In C

Hey there, in this Flutter UI Design tutorial i am sharing simple code to design Awesome looking Login & Registration page. Hey there i am Raj jani android Flutter developer. Welcome to my new blog.

Video Tutorial

Checkout this video tutorial to follow along with me. In this video i have recorded complete development process without any set cut. In this video can learn how you can design simple screen and alignment of every widget.

---

Project Structure

IDE : VS Code

Framework : Flutter – Dart

---

Project Source code

• Color File – const_colors.dart

import 'package:flutter/material.dart';

final kBlack = Colors.black;
final kWhite = Colors.white;
final kBlue = Colors.lightBlue;
final kGrey = Colors.grey[600];

• Login Page – login.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_cha_report/consts/const_colors.dart';
import 'package:flutter_cha_report/pages/register.dart';

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

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          //title section
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 14.0, top: 14),
              child: Row(
                children: [
                  Text(
                    "Sign in/",
                    style: TextStyle(
                        fontSize: 38,
                        fontWeight: FontWeight.w500,
                        color: kBlack),
                  ),
                  SizedBox(
                    width: 6,
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.of(context)
                          .push(MaterialPageRoute(builder: (context) {
                        return Register();
                      }));
                    },
                    child: Text(
                      "Sign Up",
                      style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.w500,
                          color: kGrey),
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 14.0, top: 8),
              child: Text(
                "Welcome plase Login to procced.",
                style: TextStyle(
                    fontSize: 18, fontWeight: FontWeight.w400, color: kBlack),
                //lets create colors const file for colors
              ),
            ),
            SizedBox(
              height: 80,
            ),
            //user email and password input
            Padding(
              padding: const EdgeInsets.only(left: 14.0, right: 14),
              child: TextField(
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(hintText: "Enter Email"),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 14.0, right: 14),
              child: TextField(
                obscureText: true,
                keyboardType: TextInputType.visiblePassword,
                decoration: InputDecoration(hintText: "Enter Password"),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            //remeber me check box
            Row(
              children: [
                Checkbox(value: false, onChanged: (value) {}),
                SizedBox(
                  width: 5,
                ),
                Text("Remeber Me")
              ],
            ),
            SizedBox(
              height: 20,
            ),

            //login button
            Padding(
              padding: const EdgeInsets.only(left: 14, right: 14),
              child: GestureDetector(
                onTap: () {},
                child: Container(
                  height: 42,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: kBlue,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "Sign In",
                      style: TextStyle(
                          color: kWhite,
                          fontSize: 16,
                          fontWeight: FontWeight.w400),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: () {
                    //code to navigate forget page
                  },
                  child: Text(
                    "Forget Password",
                    style: TextStyle(
                        color: kBlue,
                        fontSize: 16,
                        fontWeight: FontWeight.normal),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

I Hope this will help you to learn basics of Flutter UI Design. for Complete source code. you can download from here

Thanks for reading, Enjoy coding 🙂

Share it with friend.