Botão Flutter com texto transparente

Question

Como você faz um botão no Flutter com texto transparente para que a imagem de fundo possa ser vista através do texto? Eu tentei com um botão elevado e, em seguida, coloquei um widget de opacidade ao redor do widget de texto, mas isso mostra apenas a cor de fundo do botão. Quando procurei por perguntas relevantes, só consegui encontrar esta pergunta do Android: Botão do Android com texto transparente

Exemplo:https://i.stack.imgur.com/3W4u3.png

Answer 1

Você pode usar um ShaderMaskcom blendMode: BlendMode.srcOut. A decoração ClipRRecte borderRadius: BorderRadius.circular(8)em Container's são usados ​​para fazer os cantos arredondados. O GestureDetectoré usado para tornar a funcionalidade do botão.

Container(
  color: Colors.purpleAccent,
  child: Center(
    child: GestureDetector(
      onTap: () {
        print('tapped');
      },
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: ShaderMask(
          shaderCallback: (rect) =>
          LinearGradient(colors: [Colors.black], stops: [0.0])
          .createShader(rect),
          blendMode: BlendMode.srcOut,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              'Press me',
              style: TextStyle(
                fontSize: 36,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    ),
  ),
)

Resultado: