How do I do the “frosted glass” effect in Flutter?

前端 未结 3 442
情话喂你
情话喂你 2020-11-27 09:44

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?

相关标签:
3条回答
  • 2020-11-27 10:15
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
      child: Container(
        color: Colors.black.withOpacity(_opacity),
      ),
    ),
    
    0 讨论(0)
  • 2020-11-27 10:30

    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.

    0 讨论(0)
  • 2020-11-27 10:37

    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
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }
    
    0 讨论(0)
提交回复
热议问题