Flutter – Create Instagram Login UI

Instagram is one of the most popular social media apps out there, with over 1 billion active users. As a developer, you may be interested in replicating its login UI using Flutter, one of the most popular cross-platform app development frameworks available. In this article, we will guide you through the process of building an Instagram login UI using Flutter. A sample image is given below to get an idea about what we are going to do in this article.

Note: Make sure to have the latest version of Flutter to avoid any kind of errors.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Note: 

If you like to create a flutter project using terminal use the below command

$ flutter create flutter_app

replace the ‘ flutter_app ‘ with your project name

Step 2: Add the required assets

Add the required assets such as the Facebook logo, and Instagram Logo to your assets as they will be required in the UI.

Step 3: Build the UI

Use the following explanation and replace the below code in the main.dart file

• Start with defining the MyApp class that extends StatelessWidget and sets up the application theme and the home page, which is defined in the HomePage class. The HomePage class extends StatefulWidget and defines the state for the class using the _HomePageState class.
• In the _HomePageState class, several variables are defined, including dropdownValue for the selected language, usernameController and passwordController for the text fields, buttonColor for the color of the login button, and inputTextNotNull for determining the button’s enablement.
• In the build method, the UI is constructed using various widgets, including SafeArea, SingleChildScrollView, and ConstrainedBox to ensure that the layout is responsive and adjusts to the screen size. The Column widget is used to align and stack the various components of the UI, including the language selection dropdown, the Instagram logo, and the username and password text fields.

Dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      title: 'Instagram UI',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  String dropdownValue = 'English';

  TextEditingController usernameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  int buttonColor = 0xff26A9FF;

  bool inputTextNotNull = false;

  @override
  Widget build(BuildContext context) {

    double deviseWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: ConstrainedBox(constraints: BoxConstraints(
            minHeight: MediaQuery.of(context).size.height - 90,
          ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
            Container(
            width: MediaQuery.of(context).size.width,
              alignment: Alignment.topCenter,
              child: DropdownButton<String>(
                dropdownColor: Colors.white70,
                value: dropdownValue,
                icon: Icon(Icons.arrow_drop_down),
                iconSize: 24,
                elevation: 10,
                style: TextStyle(color: Colors.black54),
                underline: Container(),
                onChanged: (String newValue) {
                  setState(() {
                    dropdownValue = newValue;
                  });
                },
                items: <String>['English', 'Arabic', 'Italian', 'French']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value, style: TextStyle(fontSize: 16),),
                  );
                }).toList(),
              )
          ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset('assets/instagram_logo.png',
                  height: deviseWidth * .20,
                  ),
                  SizedBox(height: deviseWidth * .05,),
                  Container(
                    width: deviseWidth * .90,
                    height: deviseWidth * .14,
                    decoration: BoxDecoration(
                      color: Color(0xffE8E8E8),
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 15),
                      child: Center(
                        child: TextField(
                          onChanged: (text){
                            setState(() {
                              if(usernameController.text.length >= 2 && passwordController.text.length >= 2){
                                inputTextNotNull = true;
                              }else{
                                inputTextNotNull = false;
                              }
                            });
                          },
                          controller: usernameController,
                          style: TextStyle(
                            fontSize: deviseWidth * .040,
                          ),
                          decoration: InputDecoration.collapsed(
                            hintText: 'Phone number , email or username',
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: deviseWidth * .04,),
                  Container(
                    width: deviseWidth * .90,
                    height: deviseWidth * .14,
                    decoration: BoxDecoration(
                      color: Color(0xffE8E8E8),
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 15),
                      child: Center(
                        child: TextField(
                          onChanged: (text){
                            setState(() {
                              if(usernameController.text.length >= 2 && passwordController.text.length >= 2){
                                inputTextNotNull = true;
                              }else{
                                inputTextNotNull = false;
                              }
                            });
                          },
                          controller: passwordController,
                          obscureText: true,
                          style: TextStyle(
                            fontSize: deviseWidth * .040,
                          ),
                          decoration: InputDecoration.collapsed(
                            hintText: 'Password',
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: deviseWidth * .04,),
                  inputTextNotNull?
                  GestureDetector(
                    onLongPressStart: (s){
                      setState(() {
                        buttonColor = 0xff78C9FF;
                      });
                    },
                    onLongPressEnd: (s){
                      setState(() {
                        buttonColor = 0xff26A9FF;
                      });
                    },
                    onTap: (){
                      print('Log In');
                    },

                    child: Container(
                      width: deviseWidth * .90,
                      height: deviseWidth * .14,
                      decoration: BoxDecoration(
                        color: Color(buttonColor),
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                      ),
                      child: Center(
                        child: Text(
                          'Log In',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: deviseWidth * .040,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ):
                  Container(
                    width: deviseWidth * .90,
                    height: deviseWidth * .14,
                    decoration: BoxDecoration(
                      color: Color(0xff78C9FF),
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    child: Center(
                      child: Text(
                        'Log In',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: deviseWidth * .040,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: deviseWidth * .035,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Forgot your login details? ',
                      style: TextStyle(
                        fontSize: deviseWidth * .035,
                      ),
                      ),
                      GestureDetector(
                        onTap: (){
                          print('Get help');
                        },
                        child: Text('Get help',
                        style: TextStyle(
                          fontSize: deviseWidth * .035,
                          color: Color(0xff002588),
                          fontWeight: FontWeight.bold,
                        ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: deviseWidth * .040,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        height: 1,
                        width: deviseWidth * .40,
                        color: Color(0xffA2A2A2),
                      ),
                      SizedBox(width: 10,),
                      Text('OR',
                      style: TextStyle(
                        fontSize: deviseWidth * .040,
                      ),
                      ),
                      SizedBox(width: 10,),
                      Container(
                        height: 1,
                        width: deviseWidth * .40,
                        color: Color(0xffA2A2A2),
                      ),
                    ],
                  ),
                  SizedBox(height: deviseWidth * .06,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset('assets/facebook.png',
                      height: deviseWidth * .060,
                      ),
                      SizedBox(width: 5,),
                      Text('Login with facebook',
                      style: TextStyle(
                        color: Color(0xff1877f2),
                        fontSize: deviseWidth * .040,
                        fontWeight: FontWeight.w800,
                      ),
                      ),
                    ],
                  ),
                ],
              ),
                Container(
                  width: deviseWidth,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: deviseWidth,
                        height: 1,
                        color: Color(0xffA2A2A2),
                      ),
                      SizedBox(height: 5,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("Don't have an account? ",
                          style: TextStyle(
                            fontSize: deviseWidth * .040,
                          ),
                          ),
                          GestureDetector(
                            onTap: (){
                              print('Sing up');
                            },
                            child: Text('Sing up',
                            style: TextStyle(
                              color: Color(0xff00258B),
                              fontSize: deviseWidth * .040,
                              fontWeight: FontWeight.bold,
                            ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Here is the result of our main.dart file.