如何模糊颤动中的小部件

Question

我需要模糊一个小部件，例如一个简单的容器。我如何模糊它。

new Container(
  child: new Text('hello I am here'),
  height: 100.0,
  width: 100.0,
  color: Colors.red,
)

考虑上面的容器。

Answer 1

这是示例代码：

import 'dart:ui' as ui;

 Widget backdropFilterExample(BuildContext context, Widget child) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        child,
        BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 8.0,
            sigmaY: 8.0,
          ),
          child: Container(
            color: Colors.transparent,
          ),
        )
      ],
    );
  }

谷歌也有示例代码：

https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

Answer 2

您可以创建一个堆栈，如：

第一个孩子：你想要模糊的东西（在你的情况下：容器）

第二个孩子：BackdropFilter

在第二个孩子（BackdropFilter）中，有参数child，用于将小部件插入到树中，不会受到BackdropFilter的影响。

在您的 BackdropFilter 中，设置过滤器：ImageFilter.blur (5.0, 5.0)

5.0 是您希望的模糊量。

Answer 3

请注意，如果您想模糊某些小部件而不是下面的所有小部件，请查看ImageFilter 类而不是 BackdropFilter。

例如，

Widget _emptyCard() {
return Stack(
  alignment: Alignment.bottomCenter,
  children: [
    ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
      child: _fakeBlurredStats(),
    ),
    _noStatsMessage(),
  ],
);

}

Answer 4

我使用BackdropFilter和Position.fill例子：

import 'dart:ui' as ui;

 Widget buildBlur({@required BuildContext context, @required Widget child}) {
    return Stack(
      children: <Widget>[
        child, // Your child
        Positioned.fill(
            child: BackdropFilter(
              filter: ui.ImageFilter.blur(
                sigmaX: 1.0,
                sigmaY: 1.0,
              ),
              child: Center(
               child: XedProgress.indicator(), // replace your loading widget
             ),
           ),
         )
      ],
    );
  }