Frosted Glass Effect in Flutter

The frosted glass effect is a cool UI concept in the flutter that makes our UI look more attractive. It is basically a blurred-out overlay with reduced opacity, to distinguish or diminish a certain view. This feature really looks good but it affects the app’s performance. So, let’s see how can we implement the frosted glass effect in flutter.

Check out more about our Flutter app development services.

It is pretty easy to implement in the flutter by using the BackdropFilter() widget along with the ImageFilter class. BackdropFilter() widget in Flutter is used to blur images, containers, or many other widgets as well. It works both on iOS and android. It is used to highlight the content which needs more focus and blur the content that needs less focus.

Step1: Create a simple flutter project.

Step2: Create a container and wrap it up with BackdropFilter and ClipRect. Now add a property of backdrop filter, filter: ImageFilter.blur, and add sigma X, sigmaY. Higher the sigmaX and sigmaY, the higher blur.

 new Center(
            child: new ClipRect(
              child: new BackdropFilter(
                filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: new Container(
                  width: 200.0,
                  height: 200.0,
                  decoration: new BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.grey.shade200.withOpacity(0.5)),
                  child: Center(child: Text("Censored",style: TextStyle(fontSize: 30),)),
                ),
              ),
            ),
          )

new Center(

child: new ClipRect(

child: new BackdropFilter(

filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),

child: new Container(

width: 200.0,

height: 200.0,

decoration: new BoxDecoration(

borderRadius: BorderRadius.circular(20.0),

color: Colors.grey.shade200.withOpacity(0.5)),

child: Center(child: Text("Censored",style: TextStyle(fontSize: 30),)),

)

Step3: Stack up this widget block above an Image to see the effect in work. I used the flutter logo as an image.

Center(
              child: Container(
            height: 200,
            width: 200,
            decoration: new BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: FlutterLogo(),
          ))

Center(

child: Container(

height: 200,

width: 200,

decoration: new BoxDecoration(

borderRadius: BorderRadius.circular(20.0),

child: FlutterLogo(),

))

That’s it, you can see a blur effect on your image.

Full code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: Stack(
        children: [
          Center(
              child: Container(
            height: 200,
            width: 200,
            decoration: new BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: FlutterLogo(),
          )),
          new Center(
            child: new ClipRect(
              child: new BackdropFilter(
                filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: new Container(
                  width: 200.0,
                  height: 200.0,
                  decoration: new BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.grey.shade200.withOpacity(0.5)),
                  child: Center(child: Text("Censored",style: TextStyle(fontSize: 30),)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

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

// 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(),

);

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Demo"),

body: Stack(

children: [

Center(

child: Container(

height: 200,

width: 200,

decoration: new BoxDecoration(

borderRadius: BorderRadius.circular(20.0),

child: FlutterLogo(),

)),

new Center(

child: new ClipRect(

child: new BackdropFilter(

filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),

child: new Container(

width: 200.0,

height: 200.0,

decoration: new BoxDecoration(

borderRadius: BorderRadius.circular(20.0),

color: Colors.grey.shade200.withOpacity(0.5)),

child: Center(child: Text("Censored",style: TextStyle(fontSize: 30),)),

);

}

Thanks for reading this article ❤

If I got something wrong 🙈, let me know in the comments. I would love to improve.

Reference Link: https://mightytechno.com/frosted-glass-effect-in-flutter-app/

Also, check out Dark Theme In Flutter

nausheen Siddiqui 27 April 2023

. . .

Discuss on Helpdesk

2 comments

Dr. Majharul Oct 3, 2022 at 11:02 am

Very good

Nausheen Siddiqui Mar 20, 2023 at 10:24 am

Thanks for reading our blog. You can check out other flutter blogs here: https://mobikul.com/blog/

Frosted Glass Effect in Flutter

Leave a Comment Cancel Reply

2 comments

Message Sent!