Pulsante flutter con testo trasparente
Come si crea un pulsante in Flutter con testo trasparente in modo che l'immagine di sfondo possa essere vista attraverso il testo? L'ho provato con un pulsante in rilievo e poi inserendo un widget di opacità attorno al widget di testo, ma questo mostra solo il colore di sfondo del pulsante. Quando ho cercato domande pertinenti, ho trovato solo questa domanda Android: pulsante Android con testo trasparente
Esempio:https://i.stack.imgur.com/3W4u3.png
Risposte
Puoi usare a ShaderMaskcon blendMode: BlendMode.srcOut. I decori ClipRRecte borderRadius: BorderRadius.circular(8)in Containers servono per realizzare gli angoli arrotondati. Il GestureDetectorviene utilizzato per rendere la funzionalità del pulsante.
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,
),
),
),
),
),
),
),
)
Risultato: