flutter - 在 Flutter + Padding 中剪切文本效果

Question

我正在尝试实现 一些 Cut Out Text Effect，如 https://stackoverflow.com/a/55570169/8096916 中所示.

在我想向文本添加 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

您可以使用 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'),
        ),
      ),