在Flutter的FlatButton中更改填充的颜色？

Question

我希望在FlatButton中有两种颜色，如下所示：

我可以使用排列在列中的两个Container小部件来执行此操作，但我想使用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可能并没有考虑到多种颜色。

或者，对于我来说，使用柱内的两个FlatButton来构建它是一种颤动吗？还是一堆FlatButtons？在任何一种情况下，墨水池动画可能都不完美。

Answer 1

这是由于材料设计的限制。选择FlatButton，你隐含地要求Flutter为你设计它，以便它尊重你在Material Design官方网站here中找到的指南。特别要查看关于＆＃34;密度＆＃34;，＆＃34;尺寸和填充＆＃34;的部分。

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

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

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

.json