在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来构建它是一种Flutter吗？还是一堆FlatButtons？在任何一种情况下，墨水池动画可能并不完美。

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