如何在 Flutter 中实现“磨砂玻璃”效果？

Posted 2023-02-23

【中文标题】如何在 Flutter 中实现“磨砂玻璃”效果？

【英文标题】：How do I do the "frosted glass" effect in Flutter?

【发布时间】：2017-09-18 22:29:18

【问题描述】：

我正在编写一个 Flutter 应用程序，我想使用/实现 ios 上常见的“磨砂玻璃”效果。我该怎么做？

【问题讨论】：

我写了一篇文章来展示如何使用 BackdropFilter 和 ImageFilter 在 Flutter 上制作模糊效果 - 阅读它on Medium

您可以使用blurrycontainer 包。

【参考方案1】：

你可以使用BackdropFilter widget来实现这个效果。

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
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  

【讨论】：

如何让磨砂效果覆盖应用的整个宽度/高度？

你可以使用堆栈 gist.github.com/collinjackson/321ee23b25e409d8747b623c97afa1d5 pasteboard.co/4ln6HDHWb.png

或者，如果您尝试使用磨砂玻璃效果作为对话框的模态屏障，您可以修改您的 ModalBarrier 副本以包含 BackdropFilter。 github.com/flutter/flutter/blob/master/packages/flutter/lib/src/…

不幸的是，模糊效果在 iOS 设备上不起作用：github.com/flutter/flutter/issues/10284

iirc，上面的问题已经解决了，现在iOS设备上可以使用模糊效果了:)

【参考方案2】：

要实现所需的输出，我们可以使用blurrycontainer 包

blurrycontainer 制作带有 Frosty Glass 效果的容器，您可以在其中控制模糊半径、高度、模糊颜色等。

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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  

【参考方案3】：

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

【参考方案4】：

我想我不知道“Frosted”的确切含义（如果我的示例在这里不起作用），

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,
            ),
          ),
        ],
      ),
    );
  

结果：

我希望这会对某人有所帮助。

【讨论】：

完全有帮助。完全忘记了“堆栈”选项...非常感谢。

如何让糖霜跟随父容器的形状？添加到圆形容器中时，它仍然显示为矩形

@KakiMasterOfTime 我想我没有正确理解你的问题。但是，如果您通过删除 borderRadius 使 rectShape 容器形状变为圆形，它将起作用。

我喜欢这句话 :-)