Flutter Login/Sign Up UI create easily Sample code included

I have created it easiest as possible we have used a list of container and inside every container we have entered the content as container is flexible and we can give style very easily using container

1. run $flutter create your project name in terminal
2. delete widget folder and delete all content of main.dart inside lib folder

3.create login.dart file inside lib folder
4.create register.dart file inside lib folder

---

place this code inside main.dart

main.dart

	import 'package:flutter/material.dart';
	import 'login.dart';
	import 'register.dart';
	void main(){
	runApp(MaterialApp(
	debugShowCheckedModeBanner: false,
	initialRoute: 'login',
	routes: {
	'login':(context)=>MyLogin(),
	'register' :(context)=>Register(),
	},
	));
	}

Footer

I have also defined onpressed property for forgot pass and login button you can create manual page or we will talk about this on next post

Login.dart

	import 'package:flutter/material.dart';
	class MyLogin extends StatefulWidget {
	const MyLogin({Key? key}) : super(key: key);
	@override
	_MyLoginState createState() => _MyLoginState();
	}
	class _MyLoginState extends State<MyLogin> {
	@override
	Widget build(BuildContext context) {
	return Container(
	decoration: const BoxDecoration(
	image: DecorationImage(image: const AssetImage('assets/image/login.png'),fit: BoxFit.cover),
	),
	child: Scaffold(
	backgroundColor: Colors.transparent,
	body: Stack(
	//1st container
	children: [
	Container(
	padding: const EdgeInsets.only(left: 35, top: 130),
	child: Text(
	"Sign In",
	style: TextStyle(
	color: Colors.lightBlueAccent.shade700,
	fontSize: 25,
	fontWeight: FontWeight.bold,
	),
	),
	),
	//2nd container
	Container(
	padding: const EdgeInsets.only(left: 70, top: 25),
	child: const Text(
	"Niranjan portal",
	style: TextStyle(
	color: Colors.black87,
	fontWeight: FontWeight.bold,
	fontSize: 28,
	),
	),
	),
	//3rd container
	SingleChildScrollView(
	child: Container(
	padding: const EdgeInsets.only(top: 365, left: 30, right: 30),
	child: Column(
	children: [
	//1st text field
	TextField(
	decoration: InputDecoration(
	labelText: "Email/username",
	fillColor: Colors.grey.shade100,
	filled: true,
	prefixIcon: const Icon(Icons.email),
	hintText: "Email adress",
	border: OutlineInputBorder(
	borderRadius: BorderRadius.circular(8))),
	),
	const SizedBox(
	height: 30,
	),
	//2nd textfield
	TextField(
	obscureText: true,
	decoration: InputDecoration(
	labelText: "Password",
	fillColor: Colors.grey.shade100,
	filled: true,
	prefixIcon: const Icon(Icons.vpn_key_rounded),
	hintText: "Passsword",
	border: OutlineInputBorder(
	borderRadius: BorderRadius.circular(8))),
	),
	//1st button
	TextButton(
	onPressed: () {},
	child: const Text(
	"forgot password",
	style: const TextStyle(
	fontSize: 16, decoration: TextDecoration.underline),
	)),
	const SizedBox(
	height: 20,
	),
	//4th container
	//2nd button
	Container(
	height: 45,
	width: 120,
	child: ElevatedButton(
	onPressed: () {},
	child: const Text(
	"Login",
	style: const TextStyle(fontSize: 20, color: Colors.black),
	)),
	),
	//5th container
	Container(
	padding: const EdgeInsets.all(10),
	child: Row(
	children: [
	const Text(
	"Doesn't have an account?",
	style: const TextStyle(
	fontSize: 15,
	),
	),
	TextButton(
	onPressed: () {
	Navigator.pushNamed(context, 'register');
	},
	child: const Text(
	"Register now",
	style: const TextStyle(
	fontSize: 18,
	decoration: TextDecoration.underline,
	),
	)),
	],
	),
	)
	],
	),
	),
	),
	],
	),
	),
	);
	}
	}

Footer

---

place the following codes on your register.dart file
I have also defined onpressed button property for register button erase that or you can make your own page of same routes name

Register.dart

	import 'package:flutter/material.dart';
	class Register extends StatefulWidget {
	const Register({ Key? key }) : super(key: key);
	@override
	_RegisterState createState() => _RegisterState();
	}
	class _RegisterState extends State<Register> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	backgroundColor: Colors.transparent,
	body: Container(
	decoration: BoxDecoration(
	image: DecorationImage(image: AssetImage('assets/image/register.png'),fit: BoxFit.cover),
	),
	child: ListView(
	children: [
	//1st container
	Container(
	padding: EdgeInsets.only(left: 75,top: 40,),
	child: Text("Niranjan Portal",style: TextStyle(color: Colors.black87,fontSize: 28,fontWeight: FontWeight.w700),),
	),
	SizedBox(height: 120,),
	//2nd contianer
	Container(
	padding: EdgeInsets.only(left: 80,),
	child: Text("Create new account",style: TextStyle(color: Colors.lightBlueAccent.shade700,fontWeight: FontWeight.bold,fontSize: 20,),),
	),
	//3rd container
	Container(
	padding: EdgeInsets.only(left: 30,top: 30,right: 30),
	child: TextField(
	decoration: InputDecoration(
	labelText: "full Username",
	prefixIcon: Icon(Icons.person),
	fillColor: Colors.grey.shade100,
	filled: true,
	hintText: "Full Username",
	border: OutlineInputBorder(
	borderRadius: BorderRadius.circular(8))),
	),
	),
	//4th container
	Container(
	padding: EdgeInsets.only(left: 30,top: 30,right: 30),
	child: TextField(
	decoration: InputDecoration(
	labelText: "Email Adress",
	prefixIcon: Icon(Icons.email),
	fillColor: Colors.grey.shade100,
	filled: true,
	hintText: "Email Adress",
	border: OutlineInputBorder(
	borderRadius: BorderRadius.circular(8))),
	),
	),
	//5th container
	Container(
	padding: EdgeInsets.only(left: 30,top: 30,right: 30),
	child: TextField(
	obscureText: true,
	decoration: InputDecoration(
	labelText: "Password",
	prefixIcon: Icon(Icons.vpn_key_rounded),
	fillColor: Colors.grey.shade100,
	filled: true,
	hintText: "Password",
	border: OutlineInputBorder(
	borderRadius: BorderRadius.circular(8))),
	),
	),
	//6th continer
	Container(
	padding: EdgeInsets.only(left: 30,top: 30,right: 30),
	child: TextField(
	obscureText: true,
	decoration: InputDecoration(
	labelText: "confirm Password",
	prefixIcon: Icon(Icons.vpn_key_rounded),
	fillColor: Colors.grey.shade100,
	filled: true,
	hintText: "Confirm Password",
	border: OutlineInputBorder(
	borderRadius: BorderRadius.circular(8))),
	),
	),
	//7th container
	Container(
	height: 60,
	width: 50,
	padding: EdgeInsets.only(left: 30,right: 30,top: 20,),
	child: ElevatedButton(onPressed: (){}, child: Text("Register")),
	),
	//8th contain
	Container(
	padding: EdgeInsets.only(left: 75, top: 10,),
	child: Row(
	children: [
	Text("Already have an account?",
	style: TextStyle(fontSize: 15),),
	TextButton(onPressed: (){
	Navigator.pushNamed(context, 'login');
	}, child: Text("Login")),
	],
	),
	),
	],
	),
	),
	);
	}
	}

Footer