“Frosted Glass” effect in Flutter – Glass Container in Flutter

This will be the further next step of making the Flutter Application UI with a “Frosted Glass” effect in a flutter.

So in this Quick Flutter UI article, we will see how to make a Frosted Glass/ Glass Container. Here is the out Come Below of the Glass Container Widget

For this first, we will make a Container inside the ClipRRect. And Container with Four properties. In ClipRRrect add a circular Border of 10.0

 ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: Container(
          height: 160.0,
          width: 300,
          color: Colors.black.withOpacity(0.1),
        ),
      ),

Now in the child of this Container take the Stack Widget. In side this Stack we will create two Widgets one is for a filter and the second one is a Container.

First, Make the BackdropFilter in the Stack Widget for Blur Effect

     //Blur Effect
              BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
                child: Container(),
              ),

Second, Take a Container with Gradient and a little border around it. And even we can add borders to this Container

  //Gradient Effect
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.white.withOpacity(0.20)),
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.white.withOpacity(0.15),
                        Colors.white.withOpacity(0.05),
                      ]),
                ),
              ),

Third, Add the Widget which you want to display on the top of your glass Container. here for Example I am taking Text and some Styling with it

       const Center(
                child: Text(
                  "Glass Container",
                  style: TextStyle(
                      color: Color(0xffe7e7e7),
                      fontWeight: FontWeight.w400,
                      fontSize: 22.0),
                ),
              ),

Now your Code Will look Like this

 ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: Container(
          height: 160.0,
          width: 300,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.1),
          ),
          child: Stack(
            children: [
              //Blur Effect
              BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
                child: Container(),
              ),
              //Gradient Effect
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.white.withOpacity(0.20)),
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.white.withOpacity(0.15),
                        Colors.white.withOpacity(0.05),
                      ]),
                ),
              ),
              //Child
              const Center(
                child: Text(
                  "Glass Container",
                  style: TextStyle(
                      color: Color(0xffe7e7e7),
                      fontWeight: FontWeight.w400,
                      fontSize: 22.0),
                ),
              ),
            ],
          ),
        ),
      ),

Full File

import 'package:flutter/material.dart';

class GlassContainer extends StatefulWidget {

  const GlassContainer(
      {Key? key})
      : super(key: key);

  @override
  State<GlassContainer> createState() => _GlassContainerState();
}

class _GlassContainerState extends State<GlassContainer> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: Container(
          height: 160.0,
          width: 300,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.1),
          ),
          child: Stack(
            children: [
              //Blur Effect
              BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
                child: Container(),
              ),
              //Gradient Effect
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.white.withOpacity(0.20)),
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.white.withOpacity(0.15),
                        Colors.white.withOpacity(0.05),
                      ]),
                ),
              ),
              //Child
             const Center(child: Text("Glass Container", style: TextStyle(
                  color: Color(0xffe7e7e7),
                  fontWeight: FontWeight.w400,
                  fontSize: 22.0),)
              )
            ],
          ),
        ),
      ),
    );
  }
}

So here is how to make the “frosted glass” effect in Flutter

---

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com