
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.