如何在 Flutter 中模糊一个 widget

Question

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

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

考虑上面的容器。

Answer 1

您可以创建一个 Stack，例如：

首先child：你想要模糊的东西（在你的例子中：容器）

第二个child：BackdropFilter

而在第二个child（BackdropFilter）中，有一个参数child，用于将一个widget插入到树中，不受BackdropFilter的影响。

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

5.0 是您想要的模糊量。

Answer 2

示例代码如下：

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

Google 也有示例代码：

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

Answer 3

我们需要 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)),
             ),
           ),
          ),
        );
  }
}

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

Answer 5

模糊滤镜小部件

import 'dart:ui';

import 'package:flutter/material.dart';

class BlurFilter extends StatelessWidget {
  final Widget child;
  final double sigmaX;
  final double sigmaY;
  BlurFilter({this.child, this.sigmaX = 5.0, this.sigmaY = 5.0});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: sigmaX,
              sigmaY: sigmaY,
            ),
            child: Opacity(
              opacity: 0.01,
              child: child,
            ),
          ),
        ),
      ],
    );
  }
}

用法

import 'package:flutter/material.dart';
import 'package:my_app/widgets/blur_filter.dart';

class WidgetToImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('blur filter'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text('123'),
            Text('999'),
            BlurFilter(
              child: Text('1000'),
            ),
            Text('888'),
          ],
        ),
      ),
    );
  }
}

Answer 6

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

例如，

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

}

Answer 7

如果您想模糊文本或整个容器，请使用 ImageFiltered 小部件来包裹您的小部件，

ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Container(child: Text('your text')),
  )

Container(
child: ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Text('your text'),
  ))

如果您想模糊除内容以外的容器，请使用 BackdropFilter 包裹您的文本小部件

Container(
   child: BackdropFilter(
    imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Text('your text'),
  ))

如何在 Flutter 中模糊一个 widget

How do I blur a widget in Flutter

blur

dart

flutter