Flutter Login Page - FrostedGlass Background Flutter

Last updated Mar 12, 2021


In this post we are going to create a Flutter Login  page user Interface. This Login Page UI contains Textfields for user inputs (User name and Password) and FlatButton for user event on submitting the user credentials. 

We are going to create below login page

Flutter Login Page

 

Let's get started

This Login page starts with main.dart file. inside the main.dart file we will call MyApp where we are going to implement our Login page UI

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Login Page',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Login Page'),
    );
  }
}

 

The complete Login page UI code will be like below

import 'package:flutter/material.dart';

 

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

 

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Login'),
    );
  }
}

 

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

 

  final String title;

 

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

 

class _MyHomePageState extends State<MyHomePage> {
  TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);

 

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.

 

    final emailField = TextField(
      obscureText: true,
      style: style,
      decoration: InputDecoration(contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), hintText: "Email", border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
    );

 

    final passwordField = TextField(
      obscureText: true,
      style: style,
      decoration: InputDecoration(contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), hintText: "Password", border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
    );

 

    final loginButon = Material(
      elevation: 5.0,
      borderRadius: BorderRadius.circular(30.0),
      color: Color(0xff01A0C7),
      child: MaterialButton(
        minWidth: MediaQuery.of(context).size.width,
        padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
        onPressed: () {},
        child: Text("Login", textAlign: TextAlign.center, style: style.copyWith(color: Colors.white, fontWeight: FontWeight.bold)),
      ),
    );

 

    return Scaffold(
        backgroundColor: Colors.grey,
        body: SingleChildScrollView(
          child: Center(
            child: Container(
              color: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(36.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 155.0,
                      child: Image.asset(
                        "assets/logo.jpg",
                        fit: BoxFit.contain,
                      ),
                    ),
                    SizedBox(height: 45.0),
                    emailField,
                    SizedBox(height: 25.0),
                    passwordField,
                    SizedBox(
                      height: 35.0,
                    ),
                    loginButon,
                    SizedBox(
                      height: 15.0,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

 

Flutter Login Page Example with  FrostedGlass background.

To add FrostedGlass effect to the background of any page we will use BackdropFilter

BackdropFilter(
          filter: dartUI.ImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
          child: Container(
            height: 300.0,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey.shade200.withOpacity(0.3),
              border: Border.all(color: Colors.pink,width: 1)
            )

 

 

Complete code for Login Page with FrostedGlass background

import 'package:flutter/material.dart';
import 'dart:ui' as dartUI;
class FrostedGlass extends StatefulWidget {
  @override
  FrostedGlassState createState() => FrostedGlassState();
}

class FrostedGlassState extends State {

  Align buildTitle(BuildContext context) {
    return Align(
      alignment: Alignment.topCenter,
      child: Padding(
        padding: const EdgeInsets.only(top: 100.0),
        child: Text('Welcome', style: TextStyle(fontSize: 32.0, color: Theme
            .of(context)
            .primaryColor,),),
      ),
    );
  }

  Align buildCircle() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 225.0),
        child: Container(
          height: 150.0,
          width: 150.0,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.purpleAccent,
          ),
        ),
      ),
    );
  }

  Align buildFrostedGlass() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        child: BackdropFilter(
          filter: dartUI.ImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
          child: Container(
            height: 300.0,
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey.shade200.withOpacity(0.3),
              border: Border.all(color: Colors.pink,width: 1)
            ),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(

                child: Column(
                  children: [
                    Container(
                      width: 300,
                      margin: EdgeInsets.all(10),
                      child: TextField(
                        decoration: InputDecoration(
                        hintText: "Mobile Number",
                        labelStyle: TextStyle(color: Colors.pink),
                        hintStyle: TextStyle(
                          color: Colors.pink
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                        )
                      ),),
                    ),
                    Container(
                      width: 300,
                      margin: EdgeInsets.all(10),
                      child: TextField(
                        decoration: InputDecoration(
                            hintText: "Password",
                            labelStyle: TextStyle(color: Colors.pink),
                            hintStyle: TextStyle(
                                color: Colors.pink
                            ),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(20),
                            )
                        ),),
                    ),
                    SizedBox(height: 10,),
                    buildButton()
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Column buildButton() {
    final theme = Theme.of(context);
    return Column(
      children: [
        SizedBox(
          width: 175.0,
          height: 50.0,
          child: FlatButton(
              onPressed: () {},
              color: theme.primaryColor,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
              child: Text('Sign in', style: theme.primaryTextTheme.button,)
          ),
        ),
        FlatButton(
            onPressed: () {},
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            child: Text('Sign up', style: TextStyle(color: theme.primaryColor),)
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          buildTitle(context),
          buildCircle(),
          buildFrostedGlass(),
        ],
      ),
    );
  }
}

 

 

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: FrostedGlass(),
    );
  }

}

 

 

FrostedGlass Background

Conclusion: In this post we covered create a Flutter Login page UI and How to create a FrostedGlass background for the UI pages.


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

806 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions