Flutter – Glassmorphism UI Design for Apps

User Interfaces (UIs) are a critical component in the achievement and agreeableness of applications and websites. Also, since UIs are about looks and plan dialects, it is vulnerable to change in winning patterns and style. Throughout the long term, different developing styles have affected the UI environment. Skeuomorphism in the end offered approach to level, moderate plans. At that point came Neumorphism, which was propelled by objects in the actual world. The most recent pattern that has overwhelmed the UI world is Glassmorphism. 

Glassmorphism is the most recent pattern in UIs and is quickly filling in prominence. One of the more standard uses of this plan showed up in Apple’s macOS Big Sur  which turned out in 2020. However, what is Glassmorphism? As the name shows, it has a straightforward, smooth look. It is feasible for clients to see through layers. These layers can assist with presenting progressive system in the design. The highlights of this new UI style are: 

1. Straightforwardness as clarified above, this technique takes over a virtual glass, with background blur.
2. A multi-layered methodology which appears as though the items are skimming in space.
3. The obscured impact is highlighted with energetic tones.
4. An unobtrusive boundary on the clear items

Since Flutter is the best open source UI software development kit for creating apps on different platforms using single codebase, we will be using it for the demonstration of this trending UI design.

Step 1 : Creating a new flutter application project and adding necessary dependencies.

• Open Vs Code, press “Ctrl+Shift+P” and select “Flutter: New Application Project”
• Select the folder where you want to add this flutter project to or create a new one
• Then after selecting the folder, give a name to your project and hit “Enter”
• Flutter will create a new project for you, then on the left bottom side click on the “pubspec.yaml” file
• Add the following dependencies, which includes the glassmorphism package (Check: https://pub.dev/documentation/glassmorphism/latest/) and google fonts package (Check: https://pub.dev/packages/google_fonts) for using the glassmorphic container and google fonts

dependencies:
  flutter:
    sdk: flutter
  glassmorphism ^1.0.4
  google_fonts ^1.1.2

Step 2: Creating the assets folder and adding the required assets

• On the left side look for “New Folder” option, add a new folder and name it to “assets”
• Right-click on the folder and click on “Reveal in File Explorer”, in the assets folder make one more folder and name it “images”.
• Go to this link and download the asset files or you can choose the images on your own
• Copy these files to the assets folder, open the “pubspec.yaml” file again and add the following to the “flutter” section

flutter:
  uses-material-design: true
  assets:
      - assets/images/gfg_1.png
      - assets/images/technical_scripter.png

Step 3: This is the code for the “main.dart” file in the “lib” folder:

Dart

import 'package:flutter/material.dart';

import 'HomePage.dart';

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

class MyApp extends StatelessWidget {

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

Step 4: Adding the Home page code to our project 

• Right-click on the “lib” folder, add the new file and name it “HomePage.dart”
• The following is the code for “HomePage.dart” file

Dart

// Dart Program to create a Glassmorphism UI for app

// importing material.dart
import 'package:flutter/material.dart';

// importing glassmorphism package
import 'package:glassmorphism/glassmorphism.dart';

// importing google fonts
import 'package:google_fonts/google_fonts.dart';

// creating class of stateful widget
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(

            // for responsiveness of the ui we get the height
            // of current media using media queries
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,

            // for creating a linear gradient in
            // the background using two colors
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
              Colors.deepOrangeAccent,
              Colors.lightGreenAccent,
            ], begin: Alignment.topLeft, end: Alignment.bottomRight)),

            // building the layout
            child: LayoutBuilder(
              builder: (context, constraints) {
                return Stack(
                  children: [

                    // for creating the purple ball
                    Positioned(
                        top: constraints.maxHeight * 0.19,
                        left: constraints.maxWidth * 0.01,
                        child: Container(
                          height: constraints.maxHeight * 0.20,
                          width: constraints.maxWidth * 0.35,
                          decoration: BoxDecoration(
                              gradient: RadialGradient(
                                colors: [
                                  Colors.deepPurpleAccent,
                                  Colors.purple
                                ],
                                radius: 0.7,
                              ),
                              shape: BoxShape.circle),
                        )),

                    // for creating the red ball
                    Positioned(
                        top: constraints.maxHeight * 0.61,
                        right: constraints.maxWidth * 0.01,
                        child: Container(
                          height: constraints.maxHeight * 0.20,
                          width: constraints.maxWidth * 0.35,
                          decoration: BoxDecoration(
                              gradient: RadialGradient(
                                colors: [
                                  Colors.red.withOpacity(0.6),
                                  Colors.redAccent
                                ],
                                radius: 0.7,
                              ),

                              shape: BoxShape.circle),
                        )),

                    // for creating the glassmorphic
                    // container in the center
                    Center(
                      child: GlassmorphicContainer(
                        height: constraints.maxHeight * 0.5,
                        width: constraints.maxWidth * 0.8,
                        borderRadius: constraints.maxHeight * 0.02,
                        blur: 15,
                        alignment: Alignment.center,
                        border: 2,
                        linearGradient: LinearGradient(
                            colors: [
                              Colors.white.withOpacity(0.2),
                              Colors.white38.withOpacity(0.2)
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight),
                        borderGradient: LinearGradient(colors: [
                          Colors.white24.withOpacity(0.2),
                          Colors.white70.withOpacity(0.2)
                        ]),
                        child: Stack(
                          children: [

                            // providing gfg logo to the container
                            Positioned(
                              top: constraints.maxHeight * 0.025,
                              right: constraints.maxWidth * 0.05,
                              child: Container(
                                height: constraints.maxHeight * 0.5,
                                width: constraints.maxWidth * 0.70,
                                child: Image.asset('assets/images/gfg_1.png'),
                              ),
                            ),

                            // providing text to the container
                            Positioned(
                              top: constraints.maxHeight * 0.010,
                              right: constraints.maxWidth * 0.05,
                              child: Container(
                                height: constraints.maxHeight * 0.23,
                                width: constraints.maxWidth * 0.60,
                                child: Image.asset(
                                    'assets/images/technical_scripter.png'),
                              ),
                            ),

                            // providing technical scripter
                            // logo to the container
                            Positioned(
                              top: constraints.maxHeight * 0.35,
                              right: constraints.maxWidth * 0.10,
                              child: Container(
                                height: constraints.maxHeight * 0.2,
                                width: constraints.maxWidth * 0.60,
                                child: FittedBox(
                                  fit: BoxFit.scaleDown,
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    "Technical Scripter 2020 Article.1",
                                    style: GoogleFonts.montserrat(
                                        textStyle: TextStyle(
                                            color: Colors.white,
                                            letterSpacing: 1,
                                            fontSize: 80,
                                            fontWeight: FontWeight.w700)),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                );
              },
            )));
  }
}

Step 5: Adding a new device and running the project

• Add a new device to your project like any android mobile emulator, real device or chrome(web)
• After that press “Ctrl + F5” or go to “Run”>”Run Without Debugging” and see the output on your connected device

Output:

Glassmorphism UI Animation