Beautiful Flutter Login Page UI Design - Example Code

In this Flutter post, we will explain how to practically implement then mentioned Flutter login page UI design. Each and everything will be explained using proper Flutter code so we can have a better idea of how this Flutter login page design is implemented. So let’s get right into this beautiful Flutter login page design implementation.

Implementing Flutter Login Page UI Design (Step by Step)

Let’s start understanding how to implement this beautiful gradient Flutter login page design. See below steps:

Step 1: Gradient Container Background

To give a gradient background to our beautiful Flutter login page, we will use a gradient container. See below code:

Container(
              height: double.infinity,
              width: double.infinity,
              alignment: Alignment.center,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.blue, Colors.blue.shade200])),)

You can see that the background of our Flutter login page is now set to gradient color.

Step 2: Using Glassmorphic Container

flutter glassmorphic container

We will be using a glassmorphic package to use a container with a background having a glass effect. We will pass this glassmorphic container widget to the child constructor of the container mentioned above. Click here to understand how to import that package. Now see the below code of how to implement it:

GlassmorphicContainer(
                  width: 310,
                  height: 300,
                  borderRadius: 20,
                  linearGradient:
                      LinearGradient(colors: [Colors.white38, Colors.white10]),
                  border: 1,
                  blur: 10,
                  borderGradient: LinearGradient(
                      colors: [Colors.transparent, Colors.transparent]),)

Step 3: Username and Password Flutter TextFields

flutter textfield

To get input from the user, we will be using Flutter textfield for both username and password. Username field will get the username from user and password will get password in this Flutter login page template.

In password textfield, we have implemented a little logic in which if the user taps on the eye icon then the inputted password text will be shown. We have made the icon clickable by using the Flutter gesture detector class and have used Flutter SetState to change the state of this screen.

By default, it will be false but when a user taps on it then it will switch to true which will in turn make the password visible. Tapping on it again will hide the password.

We have written the code for password field only to avoid bulkiness of code. Don’t worry, the complete source code will be provided in the end. See below code:

 bool showPassword = false; //defining a boolean value here

TextField(
             style: TextStyle(color: Colors.white, fontSize: 15),
             cursorColor: Colors.white,
                          obscureText: showPassword ? false : true,
                          decoration: InputDecoration(
                              hintText: 'Enter password',
                              hintStyle: TextStyle(
                                  color: Colors.white70, fontSize: 15),
                              contentPadding:
                                  EdgeInsets.only(top: 14, right: 10),
                              prefixIconConstraints:
                                  BoxConstraints(maxHeight: 10),
                              prefixIcon: Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: Icon(
                                  Icons.lock,
                                  color: Colors.white70,
                                  size: 19,
                                ),
                              ),
                              suffixIconConstraints:
                                  BoxConstraints(maxHeight: 10),
                              suffixIcon: GestureDetector(
                                onTap: () {
                                  setState(() {
                                    showPassword = !showPassword;
                                  });
                                },
                                child: Padding(
                                  padding: EdgeInsets.only(left: 10),
                                  child: Icon(
                                    showPassword
                                        ? Icons.visibility
                                        : Icons.visibility_off,
                                    color: Colors.white70,
                                    size: 20,
                                  ),
                                ),
                              ),
                              enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.white, width: .2)),
                              focusedBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.white, width: .2))),
                        )

Step 4: Clickable Flutter Text of Forgot Password

Now we have used a Flutter text widget and made it clickable by wrapping it with Flutter ink well class. Using the ontap constructor of ink well, we can pass a function and specify any action we want like navigation to the next page etc. See below code:

Align(
          alignment: Alignment.centerRight,
             child: InkWell(
                 onTap: () {
                                 // specify any action here like navigation or others   
                                    },
                            child: Text(
                              'Forgot password?',
                              style: TextStyle(
                                  color: Colors.white.withOpacity(.8),
                                  fontSize: 13),
                            ),
                          ),
                        )

Step 5: Login And Signup Clickable Flutter Gradient Container Buttons

We will be using a gradient background color containers for both login and signup and make them clickable by wrapping them with gesture detector class. We can use the ontap constructor of gesture detector class and pass it a function. We can define any action in the body of that function, like navigation to some screen etc. The code for login button is given below:

GestureDetector(
                   onTap: () {},
                     child: Container(
                            padding: EdgeInsets.all(15),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                gradient: LinearGradient(colors: [
                                  Colors.blue,
                                  Colors.blue.shade200
                                ])),
                            child: Text(
                              'LOGIN',
                              style: TextStyle(
                                  color: Colors.white.withOpacity(.8),
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ),
                        ),

So this is how we have created this beautiful Flutter login page UI design. Hope you loved it. Do ask if you have any questions regarding the implementation of this Flutter login page design. I would gladly answer all.

Below is the complete source code of the Flutter login page UI design.

Flutter Login Page UI Design Complete Source Code

Flutter login page

import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  bool showPassword = false;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Container(
                height: double.infinity,
                width: double.infinity,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.blue, Colors.blue.shade200])),
                child: GlassmorphicContainer(
                  width: 310,
                  height: 300,
                  borderRadius: 20,
                  linearGradient:
                      LinearGradient(colors: [Colors.white38, Colors.white10]),
                  border: 1,
                  blur: 10,
                  borderGradient: LinearGradient(
                      colors: [Colors.transparent, Colors.transparent]),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                    child: Column(
                      children: [
                        TextField(
                          style: TextStyle(color: Colors.white, fontSize: 15),
                          cursorColor: Colors.white,
                          decoration: InputDecoration(
                              hintText: 'Enter username',
                              hintStyle: TextStyle(
                                  color: Colors.white70, fontSize: 15),
                              prefixIconConstraints:
                                  BoxConstraints(maxHeight: 10),
                              prefixIcon: Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: Icon(
                                  Icons.person,
                                  color: Colors.white70,
                                  size: 20,
                                ),
                              ),
                              contentPadding:
                                  EdgeInsets.only(top: 14, right: 10),
                              enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.white, width: .2)),
                              focusedBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.white, width: .2))),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        TextField(
                          style: TextStyle(color: Colors.white, fontSize: 15),
                          cursorColor: Colors.white,
                          obscureText: showPassword ? false : true,
                          decoration: InputDecoration(
                              hintText: 'Enter password',
                              hintStyle: TextStyle(
                                  color: Colors.white70, fontSize: 15),
                              contentPadding:
                                  EdgeInsets.only(top: 14, right: 10),
                              prefixIconConstraints:
                                  BoxConstraints(maxHeight: 10),
                              prefixIcon: Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: Icon(
                                  Icons.lock,
                                  color: Colors.white70,
                                  size: 19,
                                ),
                              ),
                              suffixIconConstraints:
                                  BoxConstraints(maxHeight: 10),
                              suffixIcon: GestureDetector(
                                onTap: () {
                                  setState(() {
                                    showPassword = !showPassword;
                                  });
                                },
                                child: Padding(
                                  padding: EdgeInsets.only(left: 10),
                                  child: Icon(
                                    showPassword
                                        ? Icons.visibility
                                        : Icons.visibility_off,
                                    color: Colors.white70,
                                    size: 20,
                                  ),
                                ),
                              ),
                              enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.white, width: .2)),
                              focusedBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.white, width: .2))),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: InkWell(
                            onTap: () {},
                            child: Text(
                              'Forgot password?',
                              style: TextStyle(
                                  color: Colors.white.withOpacity(.8),
                                  fontSize: 13),
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        GestureDetector(
                          onTap: () {},
                          child: Container(
                            padding: EdgeInsets.all(15),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                gradient: LinearGradient(colors: [
                                  Colors.blue,
                                  Colors.blue.shade200
                                ])),
                            child: Text(
                              'LOGIN',
                              style: TextStyle(
                                  color: Colors.white.withOpacity(.8),
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        GestureDetector(
                          onTap: () {},
                          child: Container(
                            padding: EdgeInsets.all(15),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                gradient: LinearGradient(colors: [
                                  Colors.blue.shade300,
                                  Colors.blue.shade200
                                ])),
                            child: Text(
                              'SIGNUP',
                              style: TextStyle(
                                  color: Colors.white.withOpacity(.8),
                                  fontSize: 13,
                                  fontWeight: FontWeight.w500),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ))));
  }
}

Conclusion

In conclusion, hope you now have a complete practical knowledge of how to implement this beautiful Flutter login page UI design practically. Do comment if you want more Flutter form designs like this. I would be happy to have your feedback on this post. Thank you for reading this post.