Przycisk Flutter z przezroczystym tekstem

Question

Jak zrobić przycisk we Flutterze z przezroczystym tekstem, aby obraz tła był widoczny przez tekst? Wypróbowałem to z podniesionym przyciskiem, a następnie umieściłem widżet krycia wokół widżetu tekstowego, ale pokazuje on tylko kolor tła przycisku. Kiedy szukałem odpowiednich pytań, mogłem znaleźć tylko to pytanie na Androida : przycisk Android z przezroczystym tekstem

Przykład: https://i.stack.imgur.com/3W4u3.png

Answer 1

Możesz użyć ShaderMaskwith blendMode: BlendMode.srcOut. ClipRRectI borderRadius: BorderRadius.circular(8)w Container„s dekoracji są wykorzystywane do wytwarzania zaokrąglonych rogach. GestureDetectorSłuży do wykonywania funkcji przycisku.

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

Wynik: