How do I do the "frosted glass" effect in Flutter?

Question

I'm writing a Flutter app, and I'd like to use/implement the "frosted glass" effect that's common on iOS. How do I do this?

I write an article to show how to make blur effect on Flutter by using BackdropFilter & ImageFilter - read it [on Medium](https://medium.com/fluttervn/how-to-make-blur-effect-in-flutter-using-backdropfilter-imagefilter-559ffd8ab73?source=friends_link&sk=044ab21dd506a6146624ec3758b0d1b4) — anticafe, Sep 30 '19 at 08:39
You can use the [blurrycontainer](https://pub.dev/packages/blurrycontainer) package. — Jon, Jul 28 '20 at 14:56

score 280 · Accepted Answer · edited Oct 10 '21 at 06:39

280

You can use the BackdropFilter widget to achieve this effect.

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

void main() {
  runApp(new MaterialApp(home: new FrostedDemo()));
}

class FrostedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new ConstrainedBox(
            constraints: const BoxConstraints.expand(),
            child: new 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(
                    color: Colors.grey.shade200.withOpacity(0.5)
                  ),
                  child: new Center(
                    child: new Text(
                      'Frosted',
                      style: Theme.of(context).textTheme.display3
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

edited Oct 10 '21 at 06:39

BananaNeil

9,455
6
43
60

answered Apr 21 '17 at 22:00

Collin Jackson

97,818
28
207
143

How would I make the frosted effect cover the entire width/height of the app? – Pieter May 09 '17 at 17:08
10

you could use a Stack https://gist.github.com/collinjackson/321ee23b25e409d8747b623c97afa1d5 http://pasteboard.co/4ln6HDHWb.png – Collin Jackson May 09 '17 at 21:40
3

or, if you're trying to use the frosted glass effect as a modal barrier for dialogs, you could modify your copy of ModalBarrier to include a BackdropFilter. https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/modal_barrier.dart – Collin Jackson May 09 '17 at 21:46
Unfortunately the blur effect doesn't work on iOS devices: https://github.com/flutter/flutter/issues/10284 – Mark Oct 11 '17 at 03:04
5

iirc, the above issue has been solved and the blur effect works on iOS devices now :) – loganrussell48 Apr 18 '18 at 15:37
Is it possible to add a Feather effect to the blurred box corners? So the transition between the blurred area and the rest of the screen is progressive and not abrupt? – Michel Feinstein Feb 04 '20 at 05:45
how about disabling the background widget (e.g. all buttons etc, under the backdrop)? – onesiumus Apr 11 '20 at 07:12
@MichelFeinstein ClipRRect might be helpful for making the corners softer – Collin Jackson Apr 12 '22 at 22:41
It is worth mentioning that you must wrap the BackdropFilter with a ClipRRect or else it will blur the entire app. – faroukcharkas May 14 '22 at 02:22

Blasanka · Answer 2 · 2019-01-13T08:34:12.133

I think I don't know the exact meaning of 'Frosted'(If my example didnot work here),

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() => runApp(
    MaterialApp(
        title: "Frosted glass",
        home: new HomePage()
    )
);

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        fit: StackFit.expand,
        children: <Widget>[
          generateBluredImage(),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              rectShapeContainer(),
            ],
          ),
        ],
      ),
    );
  }

  Widget generateBluredImage() {
    return new Container(
      decoration: new BoxDecoration(
        image: new DecorationImage(
          image: new AssetImage('assets/images/huxley-lsd.png'),
          fit: BoxFit.cover,
        ),
      ),
      //I blured the parent container to blur background image, you can get rid of this part
      child: new BackdropFilter(
        filter: new ui.ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
        child: new Container(
          //you can change opacity with color here(I used black) for background.
          decoration: new BoxDecoration(color: Colors.black.withOpacity(0.2)),
        ),
      ),
    );
  }

  Widget rectShapeContainer() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 10.0),
      padding: const EdgeInsets.all(15.0),
      decoration: new BoxDecoration(
        //you can get rid of below line also
        borderRadius: new BorderRadius.circular(10.0),
        //below line is for rectangular shape
        shape: BoxShape.rectangle,
        //you can change opacity with color here(I used black) for rect
        color: Colors.black.withOpacity(0.5),
        //I added some shadow, but you can remove boxShadow also.
        boxShadow: <BoxShadow>[
          new BoxShadow(
            color: Colors.black26,
            blurRadius: 5.0,
            offset: new Offset(5.0, 5.0),
          ),
        ],
      ),
      child: new Column(
        children: <Widget>[
          new Text(
            'There\'s only one corner of the universe you can be certain of improving and that\'s your own self.',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
          ),
        ],
      ),
    );
  }
}

Outcome:

I hope this will help someone.

totally helped. Completely forgot about 'Stack' option...big thanks. — AhabLives, Jun 03 '18 at 16:27
how can you make the frosting follow a parent container's shape ? it still show rectangular when added inside a circular shape container — Kaki Master Of Time, Jan 12 '19 at 22:21
@KakiMasterOfTime I think I didnt get your question properly. But if you make rectShape container shape to circle by removing borderRadius it will work. — Blasanka, Jan 13 '19 at 08:36

score 6 · Answer 3 · answered May 11 '21 at 03:16

To achieve the desired output we can use a blurrycontainer package

blurrycontainer make Container with Frosty Glass effect where you can control blur radius, height, blur color etc.

import 'package:flutter/material.dart';
import 'package:podo/widgets/blurry_container.dart';

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage('https://ranjeetrocky.000webhostapp.com/bg5.jpg'),
            ),
          ),
          child: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.white,
                  height: 150,
                  width: 250,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.black,
                  height: 150,
                  width: 350,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.purple,
                  blur: 2,
                  height: 120,
                  width: 150,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.lightBlueAccent,
                  height: 180,
                  width: 180,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

score 5 · Answer 4 · edited Jul 02 '20 at 14:06

5

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
  child: Container(
    color: Colors.black.withOpacity(_opacity),
  ),
),

edited Jul 02 '20 at 14:06

Andrey Ozornin

987
1
8
22

answered May 03 '20 at 22:14

Mahmoud Hamdy

51
1
4

How do I do the "frosted glass" effect in Flutter?

4 Answers4

Linked