在Flutter + Padding中剪出文字效果

Question

我正在尝试实现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中设置高度，但其效果与垂直填充相同。

Answer 1

您可以使用容器而不是填充来修复它，请尝试下一个：

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'),
        ),
      ),