FLUTTER：如何制作模糊文本？

Question

我试过像这样使用背景滤镜制作模糊文本：

BackdropFilter( filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Text('Hello FLUTTTTER') ),

我有一个问题，文字不模糊，但我喜欢这个视频：https://www.youtube.com/watch?v=dYRs7Q1vfYI

Answer 1

来自视频：

Note that the child won't be affected by the filter, only those widgets beneath it.

所以你想使用堆栈：

Stack(
  children: <Widget>[
    Center(child: Text('Hello FLUTTTTER')),
    BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: 5,
        sigmaY: 5,
      ),
      child: Container(
        color: Colors.black.withOpacity(0.5),
      ),
    ),
  ],
);

Answer 2

CustomPaint(
              foregroundPainter: RectBlurPainter(
                   rectWidth: 15,
                   blurSigma: 3.5,
                   ),
              child: Text("my blur text"),
            )

我的 RectBlurPainter 是这样的：

class RectBlurPainter extends CustomPainter {
  double rectWidth;
  double blurSigma;
  RectBlurPainter({@required this.rectWidth, this.blurSigma});

  @override
  void paint(Canvas canvas, Size size) {
   // This is the flutter_screenutil library
   ScreenUtil.init(width: 750.0, height: 1334.0, allowFontScaling: true);

   Paint paint = new Paint()
    ..color = OurColor.green
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke
    ..strokeWidth = rectWidth
    ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
    Offset center = new Offset(0, 6);

   canvas.drawRect(center & Size(180.w, 5), paint);
 }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
   return true;
  }
 }

Answer 3

如果您想模糊文本或整个容器，请使用 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：如何制作模糊文本？

FLUTTER: How make a blurry text?

text

widget

blur

flutter