3

I am trying to implement some Cut Out Text Effect as indicated in https://stackoverflow.com/a/55570169/8096916.

It works well until I want to add a Vertical padding to the text.

Imgur

NORMAL:

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

WITH HORIZONTAL PADDING:

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

WITH VERTICAL PADDING

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

I also tried give a height in the TextStyle but has the same effect as the vertical padding.

questionasker
  • 2,536
  • 12
  • 55
  • 119
jamesblasco
  • 1,744
  • 1
  • 9
  • 25

1 Answers1

0

You can use a Container instead of a Padding to fix it, try the next:

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'),
        ),
      ),
Luis Miguel Mantilla
  • 1,664
  • 1
  • 9
  • 13
  • It doesn't work. the shader mask i think is only applied to the Text frame, adding horizontal padding makes the text widget to expand but the vertical padding or setting the height of the Text Widget in the TextStyle doesn't work – jamesblasco Jul 06 '19 at 19:56