带有透明文本的 Flutter 按钮

Question

Flutter中如何做一个文字透明的按钮，让背景图片透过文字看到？我尝试用一​​个凸起的按钮，然后在文本小部件周围放置一个不透明小部件，但这只显示按钮的背景颜色。当我搜索相关问题时，我只能找到这个 android 问题:Android button with transparent text

示例:https://i.sstatic.net/3W4u3.png

Answer 1

您可以将 ShaderMask 与 blendMode: BlendMode.srcOut 一起使用。 Container装饰器中的ClipRRect和borderRadius: BorderRadius.circular(8)就是用来制作圆角的。 GestureDetector 用于实现按钮功能。

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

结果: