Flutter button with transparant text

Question

How do you make a button in Flutter with transparant text so that the background picture can be seen through the text? I tried it with a raised button and then putting a opacity widget around the text widget but that just shows the background color of the button. When i searched for relevant questions i could only find this android question: Android button with transparent text

Example: https://i.sstatic.net/3W4u3.png

Answer 1

You can use a ShaderMask with blendMode: BlendMode.srcOut. The ClipRRect and borderRadius: BorderRadius.circular(8) in Container's decoration are used to make the rounded corners. The GestureDetector is used to make the button functionality.

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

Result: