带有透明文本的颤动按钮答案

【问题标题】：Flutter button with transparant text带有透明文本的颤动按钮
【发布时间】：2020-12-14 14:04:25
【问题描述】：

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

示例：https://i.stack.imgur.com/3W4u3.png

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案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,
              ),
            ),
          ),
        ),
      ),
    ),
  ),
)

结果：

【讨论】：

由于只有“点击”（没有拖动等）控制正在进行，所以我建议使用 InkWell 而不是 GestureDetector，因为这个动画简单但有用（向用户提供反馈）。真正需要注意的是，添加垂直填充不适用于这种方法，它会出现在布局中，但不会被涂成黑色。不要浪费你的答案@Mobina heh，只是指出 OP / 其他读者以后可能会遇到的一些缺点，考虑到有时不成熟的颤动可能是一个很好的答案:)。
使用InkWell 会导致圆角出现问题。垂直填充肯定是一个问题。有一个丑陋的解决方法不是很好：在实际文本之前和之后添加新行并降低行高。希望他们有一天为此目的添加适当的小部件。 @Uroš
InkWell 可以有自己的边框半径。所以简单地匹配半径InkWell(onTap: () {print('tapped');}, borderRadius: BorderRadius.circular(8), ... 将获得所需的效果（角落没有发光/阴影），正如您在this gif 上看到的那样。嘿，是的，希望有一天我们不必求助于这些愚蠢的解决方法。