Flutter Beautiful Login/SignUp Responsive UI Design with animation.

JOSEF YADUVANSHI

5 min readMar 6, 2022

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

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

HomeScreen

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.

HomeScreen

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.

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.

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.

LoginScreen

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.