Flutter Beautiful Login/SignUp Responsive UI Design with animation.

Flutter Beautiful Login/SignUp Responsive UI Design with animation.

ContentsOfThisPost

• Introduction

• GitHub Repo
  

• Home Screen

• Login Screen

• Sign Up Screen

• Forget Password

• Routes

• Text Animation

  INTRODUCTION
  In this lesson, We will learn how to create a Flutter App with responsive UI.
  First let’s create a home screen UI.

• Home Screen
  

  	import 'package:flutter/material.dart';
  	import 'package:animated_text_kit/animated_text_kit.dart';
  	class HomeScreen extends StatefulWidget {
  	const HomeScreen({Key? key}) : super(key: key);
  	@override
  	State<HomeScreen> createState() => _HomeScreenState();
  	}
  	class _HomeScreenState extends State<HomeScreen> {
  	@override
  	Widget build(BuildContext context) {
  	return Material(
  	child: SafeArea(
  	child: Scaffold(
  	backgroundColor: Colors.white,
  	appBar: AppBar(
  	backgroundColor: Colors.red,
  	centerTitle: true,
  	title: const Text(
  	'Home Screen',
  	style: TextStyle(
  	fontSize: 20,
  	fontWeight: FontWeight.bold,
  	fontFamily: 'Times',
  	),
  	),
  	),

  view raw HomeScreen.dart hosted with ❤ by GitHub
  > Having well organized code is always a good practice. So, I have created a new file in Screens Folder in the Library section.

  Import the Material Library, and create a Stateful widget, You can use the snippets to create the boiler plate code. After creating the class, we will work on material widget because it provide us very good options for designing our UI. After you can wrap the material widget with another widget i.e. SafeArea.( A widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen.). If you are using VS code you can use refractor shortCut key to wrap Class with widget, padding, center etc. [ For Windows: ctrl + . and For mac: cmd+. ]
  We will use scaffold class for the AppBar Widget. We can add title widget to create a title for our AppBar. title: takes Text widget which again takes a String dataType. We can further modify it with another widget called TextStyle Widget.
  

  	body: SingleChildScrollView(
  	child: Center(
  	child: Column(
  	children: [
  	Image.asset(
  	'assets/images/welcome.png',
  	fit: BoxFit.cover,
  	),
  	const SizedBox(
  	height: 10,
  	width: 10,
  	),
  	Image.asset(
  	'assets/images/welcomee.png',
  	fit: BoxFit.cover,
  	scale: 2.0,
  	),

  view raw 1.dart hosted with ❤ by GitHub

  > So let’s work on the body: of the Scaffold. So, We will use the SingleChildScrollView widget so that our UI will be compatible with different screen sizes. Again, wrap the widget with center so that our image will be aligned in center of the screen. Next we will use column widget to insert our images. To import the images we will use the Image.asset(‘’) widget. We can directly specify our image location address between the parenthesis within the Quotes. Before doing that we also need to update our pubsec.yaml file.

UnComment the asset section and add the location of the images folder. In my case, I have created a new folder named asset and added all the images there.
After adding the images you can use fit: and BoxFit to adjust the image in the body.

	AnimatedTextKit(
	animatedTexts: [
	WavyAnimatedText(
	'Welcome to my app ❤️',
	textStyle: const TextStyle(
	fontSize: 18,
	color: Colors.red,
	fontFamily: 'Times New Roman',
	),
	),
	WavyAnimatedText(
	'Follow me at GitHub @josephyaduvanshi .',
	textStyle: const TextStyle(
	fontSize: 18,
	color: Colors.red,
	fontFamily: 'Times New Roman',
	),
	),
	],
	isRepeatingAnimation: true,
	onTap: () {
	debugPrint("Joseph");
	},
	),
	],
	),
	),
	),
	drawer: const Drawer(),
	),
	),
	);
	}
	}

view raw 2.dart hosted with ❤ by GitHub

> Up to this it looks Simple, to make it little more beautiful we will add some animation. I am using a package for text animation. I.E. AnimatedTextKit you can add it in dependencies or just run this command in the terminal.

$ flutter pub add animated_text_kit

view raw h.vim hosted with ❤ by GitHub

This is how our HomeScreen Looks after designing the Text with the Animated Text Kit package.

Routes

In Flutter, screens and pages are called routes, To navigate from one page to another we will need routes. So, We have to implement in our code for an interactive UI. I have created a different file in Utilities folder for routes.

To implement in our App we need to add it in our main.dart file.

Login Screen

Let’s see the code for our Login Screen.

	import 'package:animated_text_kit/animated_text_kit.dart';
	import 'package:flutter/material.dart';
	import 'package:auth_app_flutter/Utilities/routes.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) {
	return Material(
	color: Colors.white,
	child: SafeArea(
	child: SingleChildScrollView(
	child: Column(
	children: [
	Image.asset(
	'assets/images/logo.png',
	fit: BoxFit.cover,
	),
	AnimatedTextKit(
	animatedTexts: [
	TypewriterAnimatedText('Welcome!',
	textStyle: const TextStyle(
	color: Colors.red,
	fontSize: 30,
	fontStyle: FontStyle.italic,
	fontFamily: 'Times New Roman',
	fontWeight: FontWeight.w500,
	),
	speed: const Duration(
	milliseconds: 450,
	)),
	],
	onTap: () {
	debugPrint("Welcome back!");
	},
	isRepeatingAnimation: true,
	totalRepeatCount: 2,
	),
	Padding(
	padding: const EdgeInsets.symmetric(
	vertical: 16,
	horizontal: 32,
	),
	child: Column(
	children: [
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(Icons.email),
	hintText: 'Enter Your Username/Email',
	labelText: 'Email or Username',
	),
	onChanged: (value) {
	setState(() {});
	},
	),
	TextFormField(
	obscureText: true,
	decoration: const InputDecoration(
	icon: Icon(Icons.lock),
	hintText: 'Enter Your Password',
	labelText: 'Password',
	),
	onChanged: (value) {
	setState(() {});
	},
	),
	TextButton(
	onPressed: () {
	Navigator.pushNamed(context, MyRoutes.forgotPassword);
	},
	child: const Text(
	'Forgot Password?',
	),
	),
	TextButton.icon(
	onPressed: (() {
	Navigator.pushNamed(context, MyRoutes.homeScreen);
	}),
	icon: const Icon(Icons.login),
	label: Container(
	alignment: Alignment.center,
	width: 150,
	height: 35,
	child: const Text(
	'Sign In',
	style: TextStyle(
	fontSize: 18,
	color: Colors.white,
	),
	),
	decoration: BoxDecoration(
	color: Colors.red,
	borderRadius: BorderRadius.circular(25),
	),
	),
	),
	Row(
	children: [
	const Text('Don\'t have an account?'),
	TextButton(
	onPressed: (() {
	Navigator.pushNamed(
	context,
	MyRoutes.signUp,
	);
	}),
	child: const Text(
	'Sign Up',
	style: TextStyle(
	fontSize: 15,
	fontWeight: FontWeight.bold,
	),
	),
	),
	],
	mainAxisAlignment: MainAxisAlignment.center,
	),
	],
	),
	),
	],
	),
	),
	),
	);
	}
	}

view raw LoginScree.dart hosted with ❤ by GitHub

> This is how it looks:

The process is similar as the HomeScreen I.E Stateful classes, animation, Material, Column. etc, So I will discuss only the new added things in this lesson.
From the code, You can see I have used the TextFormField widget for the Email and password section. The TextFormField takes decoration: , hint text icons, label text and many more other widgets to create the form field interactive.
You can easily design as per your wish with the help of TextFormField. After designing the TextFormField, I have added a TextButton for the the forget password screen. Also added the route to the ForgetPassword screen. We can use Navigator.PushNamed() to perform the task. Similarly added the Sign In button using TextButton.icon and navigated it to the HomeScreen when pressed by the User.
Added the text Button just below the Sign In button for Sign Up. Which navigates the user to the Sign Up Screen.
Let’s see the code and its appearance.

	import 'package:flutter/material.dart';
	import 'package:auth_app_flutter/Utilities/routes.dart';
	class SignUp extends StatefulWidget {
	const SignUp({Key? key}) : super(key: key);
	@override
	State<SignUp> createState() => _SignUpState();
	}
	class _SignUpState extends State<SignUp> {
	@override
	Widget build(BuildContext context) {
	return Material(
	color: Colors.white,
	child: SafeArea(
	child: Column(
	children: [
	Image.asset(
	'assets/images/signup.png',
	fit: BoxFit.cover,
	height: 300,
	width: 350,
	),
	const SizedBox(
	height: 20,
	width: 20,
	),
	const Text(
	'Create Account',
	style: TextStyle(
	fontSize: 30,
	fontFamily: 'Courier',
	color: Colors.red,
	fontWeight: FontWeight.bold,
	),
	textAlign: TextAlign.center,
	),
	Padding(
	padding: const EdgeInsets.symmetric(
	vertical: 16,
	horizontal: 32,
	),
	child: Column(
	children: [
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(Icons.person),
	hintText: 'Enter Your Full Name',
	labelText: 'Full Name',
	),
	),
	const SizedBox(
	height: 10,
	width: 10,
	),
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(Icons.email),
	hintText: 'Enter Your Email/Username',
	labelText: 'Email or Username',
	),
	),
	const SizedBox(
	height: 10,
	width: 10,
	),
	TextFormField(
	obscureText: true,
	decoration: const InputDecoration(
	icon: Icon(Icons.lock),
	hintText: 'Enter Your Password',
	labelText: 'Password',
	),
	),
	const SizedBox(
	height: 10,
	width: 10,
	),
	TextButton.icon(
	onPressed: (() {
	//sign up
	}),
	icon: const Icon(Icons.create),
	label: Container(
	alignment: Alignment.center,
	width: 150,
	height: 35,
	child: const Text(
	'Sign Up',
	style: TextStyle(
	fontSize: 18,
	color: Colors.white,
	),
	),
	decoration: BoxDecoration(
	color: Colors.red,
	borderRadius: BorderRadius.circular(25),
	),
	),
	),
	Row(
	children: [
	const Text('Already have an account?'),
	TextButton(
	onPressed: (() {
	Navigator.pushNamed(
	context,
	MyRoutes.loginScreen,
	);
	}),
	child: const Text(
	'Sign In',
	style: TextStyle(
	fontSize: 15,
	fontWeight: FontWeight.bold,
	),
	),
	),
	],
	mainAxisAlignment: MainAxisAlignment.center,
	),
	const Text(
	'By signing up you agree to our terms, conditions and privacy Policy.',
	style: TextStyle(
	fontSize: 13,
	),
	),
	],
	),
	),
	],
	),
	),
	);
	}
	}

view raw signup.dart hosted with ❤ by GitHub

> This is how it looks:-)
The codes are almost similar to login Screen, Just gave a different touch for sign Up.

Forget Password

Code and Appearance:

	import 'package:flutter/material.dart';
	import 'package:auth_app_flutter/Utilities/routes.dart';
	class ForgotPassword extends StatefulWidget {
	const ForgotPassword({Key? key}) : super(key: key);
	@override
	State<ForgotPassword> createState() => _ForgotPasswordState();
	}
	class _ForgotPasswordState extends State<ForgotPassword> {
	@override
	Widget build(BuildContext context) {
	return Material(
	color: Colors.white,
	child: SafeArea(
	child: Column(
	children: [
	Image.asset(
	'assets/images/forgot.png',
	fit: BoxFit.cover,
	),
	const SizedBox(
	height: 35,
	width: 30,
	),
	const Center(
	child: Text(
	'Send Reset Link to Email!',
	style: TextStyle(
	fontSize: 22,
	color: Colors.red,
	fontWeight: FontWeight.bold,
	fontFamily: 'Courier',
	),
	),
	),
	Padding(
	padding: const EdgeInsets.symmetric(
	vertical: 32,
	horizontal: 16,
	),
	child: Column(
	children: [
	TextFormField(
	decoration: const InputDecoration(
	hintText: 'Enter Your Email',
	labelText: 'Email',
	border: OutlineInputBorder(),
	),
	),
	const SizedBox(
	height: 10,
	width: 10,
	),
	TextButton.icon(
	onPressed: (() {}),
	icon: const Icon(
	Icons.read_more,
	size: 28,
	),
	label: Container(
	alignment: Alignment.center,
	width: 150,
	height: 35,
	child: const Text(
	'Send Reset Link',
	style: TextStyle(
	fontSize: 12,
	color: Colors.white,
	),
	),
	decoration: BoxDecoration(
	color: Colors.red,
	borderRadius: BorderRadius.circular(25),
	),
	),
	),
	const SizedBox(
	height: 10,
	width: 10,
	),
	TextButton.icon(
	onPressed: (() {
	Navigator.pushNamed(context, MyRoutes.loginScreen);
	}),
	icon: const Icon(
	Icons.home,
	size: 28,
	),
	label: Container(
	alignment: Alignment.center,
	width: 150,
	height: 35,
	child: const Text(
	'Return Home',
	style: TextStyle(
	fontSize: 12,
	color: Colors.white,
	),
	),
	decoration: BoxDecoration(
	color: Colors.red,
	borderRadius: BorderRadius.circular(25),
	),
	),
	),
	],
	),
	),
	],
	),
	),
	);
	}
	}

view raw forgot.dart hosted with ❤ by GitHub

> This is how it Looks!

If you read up to this, Thank You!

Share and Support! You can subscribe so that you won’t miss any latest posts from me. Also, I have given the Github Repo link. FoRK IT 🍴.

Comments

[Kalifa SENOU]

you haven't display the content route.dart, there some file that's not display

[JOSEPHYADUVANSHI]

I understand that you may have been puzzled. The MyRoutes class is located within the routes.dart file. Additionally, you can checkout the code from the Github repository once. Please do not hesitate to contact me if you have any further inquiries.

[Kalifa SENOU]

thanks you for the repaly