在 Flutter + Padding 中剪切文本效果答案

【问题标题】：Cut Out Text Effect In Flutter + Padding在 Flutter + Padding 中剪切文本效果
【发布时间】：2019-07-06 14:03:45
【问题描述】：

我正在尝试按照https://stackoverflow.com/a/55570169/8096916 中的说明实现some Cut Out Text Effect。

在我想在文本中添加Vertical padding 之前，它运行良好。

正常：

ShaderMask(
      blendMode: BlendMode.srcOut,
      shaderCallback: (bounds) =>
          LinearGradient(colors: [Colors.white], stops: [0.0]).createShader(bounds),
      child: Text('Example'),
);

水平填充：

ShaderMask(
      blendMode: BlendMode.srcOut,
      shaderCallback: (bounds) =>
          LinearGradient(colors: [Colors.white], stops: [0.0]).createShader(bounds),
      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          child: 
Text('Example'),
),);

垂直填充

ShaderMask(
      blendMode: BlendMode.srcOut,
      shaderCallback: (bounds) =>
          LinearGradient(colors: [Colors.white], stops: [0.0]).createShader(bounds),
      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 10.0),
                          child: 
Text('Example'),
),);

我也尝试在 TextStyle 中指定高度，但效果与垂直填充相同。

【问题讨论】：

标签： flutter

【解决方案1】：

你可以使用 Container 代替 Padding 来修复它，试试下一个：

ShaderMask(
      blendMode: BlendMode.srcOut,
      shaderCallback: (bounds) =>
          LinearGradient(colors: [Colors.white], stops: [0.0]).createShader(bounds),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0),
        child: Text('Example'),
        ),
      ),

【讨论】：

它不起作用。我认为着色器蒙版仅适用于文本框架，添加水平填充会使文本小部件展开，但垂直填充或在 TextStyle 中设置文本小部件的高度不起作用