Flutter Beautiful Login/SignUp Responsive UI Design with animation. (2024)

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
  

  > 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.
  

  > 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.

See Also

Login/SignUp Page in FlutterHow to Build a Simple Login App with FlutterBuilding a responsive login page in Flutter - LogRocket BlogHow to create a login screen in Flutter

Login Screen

Let’s see the code for our Login Screen.

> 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.

> 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:

> 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 🍴.