Pulsante flutter con testo trasparente

Aug 26 2020

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

4 Mobina Aug 26 2020 at 04:10

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: