Simple Login Page With Logo Image In Flutter Android App

Posted By Bajarangi soft , Posted On 23-09-2020

The key to this is the addition of a decoration and boxDecoration to our Container widget. This allows us to define a LinearGradient With Login Page which can be given colors, as well as a begin and end Alignment.

Step 1
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below

flutter: 
  assets: 
   - assets/images/

YOu Can Add Login Page With Logo Image Code:

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    SizedBox(height: 20,),
    Padding(
      padding: EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          CircleAvatar(
            backgroundImage: AssetImage("assets/images/logo.jpeg"),
            radius: 80.0,
          ),
          SizedBox(height: 20,),
          Text("Welcome Bajarangisoft", style: TextStyle(color: Colors.grey[600], fontSize: 22),),
        ],
      ),
    ),
    Padding(
        padding: EdgeInsets.all(4.0),
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(5),
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(8.0),
                    child:  TextField(
                      decoration: InputDecoration(
                          hintText: "Email or Phone number",
                          hintStyle: TextStyle(
                              color: Colors.grey[600])),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(8.0),
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: "Password",
                          hintStyle: TextStyle(
                              color: Colors.grey[600])
                      ),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: 10,),
            Container(
              height: 40,
              width: 150,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                      begin: Alignment.centerRight,
                      end: Alignment.centerLeft,
                      colors: [Colors.blue[500], Colors.blue[200]]
                  )
              ),
              child: Center(
                child:Text("Sign Up", style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold),),
              ),
            ),
            SizedBox(height: 5,),
            Container(
                child: Row(
                  children: <Widget>[
                    Text('Does not have account?',style: TextStyle(color: Colors.grey[600]),),
                    FlatButton(
                      textColor: Colors.blue[300],
                      child:  Text(
                        'Sign in',
                        style: TextStyle(fontSize: 20),
                      ),
                      onPressed: () {
                        //signup screen
                      },
                    )
                  ],
                  mainAxisAlignment: MainAxisAlignment.center,
                ))
          ],
        )
    )
  ]
)

Complete Code For Login Page With Logo Image In Flutter:
Main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
//             color: Colors.indigo,
              child:  Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 20,),
                  Padding(
                    padding: EdgeInsets.all(20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundImage: AssetImage("assets/images/logo.jpeg"),
                          radius: 80.0,
                        ),
                        SizedBox(height: 20,),
                        Text("Welcome Bajarangisoft", style: TextStyle(color: Colors.grey[600], fontSize: 22),),
                      ],
                    ),
                  ),
                  Padding(
                      padding: EdgeInsets.all(4.0),
                      child: Column(
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.all(5),
                            child: Column(
                              children: <Widget>[
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  child:  TextField(
                                    decoration: InputDecoration(
                                        hintText: "Email or Phone number",
                                        hintStyle: TextStyle(
                                            color: Colors.grey[600])),
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.all(8.0),
                                  child: TextField(
                                    decoration: InputDecoration(
                                        hintText: "Password",
                                        hintStyle: TextStyle(
                                            color: Colors.grey[600])
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          SizedBox(height: 10,),
                          Container(
                            height: 40,
                            width: 150,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                gradient: LinearGradient(
                                    begin: Alignment.centerRight,
                                    end: Alignment.centerLeft,
                                    colors: [Colors.blue[500], Colors.blue[200]]
                                )
                            ),
                            child: Center(
                              child:Text("Sign Up", style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),),
                            ),
                          ),
                          SizedBox(height: 5,),
                          Container(
                              child: Row(
                                children: <Widget>[
                                  Text('Does not have account?',style: TextStyle(color: Colors.grey[600]),),
                                  FlatButton(
                                    textColor: Colors.blue[300],
                                    child:  Text(
                                      'Sign in',
                                      style: TextStyle(fontSize: 20),
                                    ),
                                    onPressed: () {
                                      //signup screen
                                    },
                                  )
                                ],
                                mainAxisAlignment: MainAxisAlignment.center,
                              ))
                        ],
                      )
                  )
                ]
              )
            ),
        )
    );
  }
}

Related Post

How To Design Flutter Login And Register Screens UI Example
How To Set Up Dropdown Menu In Appbar In Flutter App
How To Set Up Gradiant Background Color In Flutter App
How To Set Up Bottom Navigation Bar In Flutter App
How To Remove Debug Banner In Flutter On Android App
How To Set Up Navigation Drawer In Flutter Android App
How To Set Up Tabbar With Example In Flutter Android App
How To Add Asset And Image In flutter Using Android
Vertical Scroll View With Example With Flutter Android
How To Add Scroll View With Example Using Flutter App
How To Set Up Box Shadow Using Flutter Android App
Flutter List View In Widget With Vertical With Example
Flutter Like Button Animation With Example Using Android
How To Fetch Data Using Model Name With Example Using Laravel

Simple Login Page With Logo Image In Flutter Android App

The key to this is the addition of a decoration and boxDecoration to our Container widget. This allows us to define a LinearGradient With Login Page which can be given colors, as well as a begin and end Alignment.

Step 1 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 1
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.