button - 更改 Flutter FlatButton 中填充的颜色？

Question

我想在我的 FlatButton 中有两种颜色，像这样:

我可以使用排列在一个列中的两个容器小部件来执行此操作，但我想使用 FlatButton，因为它带有 onPressed 并且已经内置了墨水瓶动画。

所以我尝试在 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 中使用两个 FlatButton 来构建它对我来说是 Flutter 的失礼吗？还是一堆 FlatButton？在这两种情况下，墨水瓶动画可能并不完美。

Answer 1

这是由于 Material 设计的限制。选择一个 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
        ),