FLUTTER：如何制作模糊的文字？

Posted 2023-02-23

【中文标题】FLUTTER：如何制作模糊的文字？

【英文标题】：FLUTTER: How make a blurry text?

【发布时间】：2020-05-09 14:37:17

【问题描述】：

我尝试使用这样的背景过滤器制作模糊文本：

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

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

【问题讨论】：

这个链接会帮助你***.com/questions/43550853/…

【参考方案1】：

如果您想模糊文本或整个容器，请使用 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'),
  ))

【参考方案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;
  
 

【参考方案3】：

来自视频：

请注意，孩子不会受到过滤器的影响，只会受到那些小部件的影响 在它下面。

所以你想使用堆栈：

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

【讨论】：

应该是按文字大小动态换行