TextField 中的模糊文本

Question

有没有简单的方法来模糊文本字段？当与高度结合使用时，容器上通常的模糊效果会产生不需要的副作用。

这根本行不通：

Stack(
  children: [
    Container(
      child: Text("Text to hide")
    ),
    BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: 5,
        sigmaY: 5,
      ),
      child: Container(
        color: Colors.black.withOpacity(0.8),
      ),
    ),
  ],
),

Answer 1

您可以将 Paint 用于 TextStyle 的 foreground:

Text(
          'text to hide',
          style: TextStyle(
              fontSize: 36,
              foreground: Paint()
                ..style = PaintingStyle.fill
                ..color = Colors.grey
                ..maskFilter = MaskFilter.blur(BlurStyle.normal, 6)),
        ),

结果：

Answer 2

试试这个

            Stack(
              children: [
                Container(
                    child: Text("Text to hide")
                ),
                BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 2,
                    sigmaY: 2,
                  ),
                  child: Container(
                    color: Colors.transparent,
                    height: 25,
                  ),
                ),
              ],
            ),

TextField 中的模糊文本

Blur text in TextField

blur

textfield

flutter