Login Page - FrostedGlass Background Flutter

In this post we are going to create Login page with FrostedGlass background.

Let's Start

Step 1: Create Flutter application

Step 2: Create dart file and update below code

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

class FrostedGlassState extends State<FrostedGlass> {

  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: <Widget>[
        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: <Widget>[
          buildTitle(context),
          buildCircle(),
          buildFrostedGlass(),
        ],
      ),
    );
  }
}

 

Step 3: Update main dart file

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(),
    );
  }

}

 

Step 4: Run application

FrostedGlass Background