更改 Flutter FlatButton 中的填充颜色？

Posted 2023-02-23

【中文标题】更改 Flutter FlatButton 中的填充颜色？

【英文标题】：Change the color of the padding in Flutter's FlatButton?

【发布时间】：2018-06-13 14:30:49

【问题描述】：

我想在我的 FlatButton 中有两种颜色，如下所示：

我可以使用排列在一个 Column 中的两个 Container 小部件来做到这一点，但我想使用 FlatButton，因为它带有 onPressed 并且已经内置了 inkwell 动画。

所以我尝试在 FlatButton 内进行：

return new Container(
  child: new Material(
    child: new FlatButton(
      color: color[100],
      onPressed: () => _navigateToConverter(context),
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            child: new Icon(
              icon,
              size: 40.0,
            ),
          ),
          new Container(
            height: 30.0,
            width: 500.0, // Changing this doesn't do anything
            color: Colors.grey[200],
            child: new Center(
              child: new Text(
                name,
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

但这只会产生一个带有完全紫色填充的灰色矩形，如下所示：

有没有办法覆盖或删除填充？我知道 FlatButton 可能没有考虑多种颜色。

另外，我在一个 Column 中使用两个 FlatButtons 来构建它是不是 Flutter 失礼？还是一堆平面按钮？在这两种情况下，墨水池动画可能并不完美。

【参考方案1】：

这是由于材料设计的限制。选择一个 FlatButton 意味着你要求 Flutter 为你设计它，所以它尊重你可以在 Material Design 官方网站here 中找到的指南。尤其要查看关于“密度”、“大小和填充”的部分。

长话短说，FlatButton 两边的边距为 16 dp。

解决方案：使用 InkWell - 我相信这是您想要使用的 - 因为它没有边距。

这里是代码和结果（请注意我用常量替换了参数和变量）

      new Container(
          child: new Material(
            child: new InkWell(
              onTap: () => null, // ReplaceMe
              enableFeedback: true,
              child:
              new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                   child: new Icon(
                      Icons.battery_charging_full, // ReplaceMe
                      size: 40.0,
                    ),
                      color: Colors.purple.shade200, // ReplaceMe
                  ),
                  ),
                    new Container(
                      height: 30.0,
                      color: Colors.grey[200],
                      child: new Center(
                        child: new Text(
                          "Energy", // ReplaceMe
                          textAlign: TextAlign.center,
                        ),
                      ),
                  ),
                ],
              ),
            ),
          ),
          height: 100.0, // DeleteMe needed just for test
        ),

【讨论】：

谢谢！这看起来不错，但当我点击它时，除非未指定颜色（示例中的紫色），否则没有墨水池动画。有没有办法解决这个问题？

看来我的上述行为是意料之中的，见***.com/questions/45424621/…和github.com/flutter/flutter/issues/3782