Question

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

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

考虑上面的容器。

Answer 1

您可以创建 Stack ，如：

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

第二个孩子：BackdropFilter

第三个孩子：您想要在模糊小部件上方显示的内容（可选）

在BackdropFilter中，设置过滤器：ImageFilter.blur（5.0,5.0）

5.0是你想要的模糊量。

Answer 2

我使用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
             ),
           ),
         )
      ],
    );
  }

Answer 3

模糊过滤器小部件

def check_project_activity
  // code here
end

用法

every 1.day, at: '4:30 am' do
    runner "Stage.check_project_activity"
 end

Answer 4

这是示例代码：

import 'dart:ui' as ui;

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

Google还在以下位置提供了示例代码：

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

Answer 5

我们需要3件东西来制作模糊小部件

1.Stack
2.BackdropFilter
3.ImageFilter.blur

Stack(
     children: <Widget>[
       Container(child: Text( "Hello")),              // First child
       BlurryEffect(0.5,0.1,Colors.grey.shade200)    //  Second Child
     ],
)

和

class BlurryEffect extends StatelessWidget {
  final double opacity;
  final double blurry;
  final Color shade;

  BlurryEffect(this.opacity,this.blurry,this.shade);

    @override  Widget build(BuildContext context) {
    return Container(
      child: ClipRect(
        child:  BackdropFilter(
          filter:  ImageFilter.blur(sigmaX:blurry, sigmaY:blurry),
            child:  Container(
              width: double.infinity,
              height:  double.infinity,
              decoration:  BoxDecoration(color: shade.withOpacity(opacity)),
             ),
           ),
          ),
        );
  }
}

如何在fluttter中模糊小部件

5 个答案: