Flatterknopf mit transparentem Text

Question

Wie macht man in Flutter eine Schaltfläche mit transparentem Text, damit das Hintergrundbild durch den Text gesehen werden kann? Ich habe es mit einer erhöhten Schaltfläche versucht und dann ein Deckkraft-Widget um das Text-Widget gelegt, aber das zeigt nur die Hintergrundfarbe der Schaltfläche. Als ich nach relevanten Fragen suchte, konnte ich nur diese Android-Frage finden: Android-Schaltfläche mit transparentem Text

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

Answer 1

Sie können ein ShaderMaskmit verwenden blendMode: BlendMode.srcOut. Die ClipRRectund borderRadius: BorderRadius.circular(8)in Container's Dekoration werden verwendet, um die abgerundeten Ecken zu machen. Mit GestureDetectorwird die Schaltflächenfunktionalität hergestellt.

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

Ergebnis: