Change the color of the padding in Flutter's FlatButton?

Question

I want to have two colors in my FlatButton, like this:

I could do this using two Container widgets arranged in a Column, but I want to use the FlatButton because it comes with onPressed and the inkwell animation already built in.

So I try to do it within the 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,
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

but this only yields a grey rectangle with completely purple padding, like this:

Is there a way to override or remove the padding? I understand the FlatButton was probably not built with multiple colors in mind.

Alternatively, is it a Flutter faux pas for me to build this using two FlatButtons inside a Column? Or a Stack of FlatButtons? In either of these cases, the inkwell animation may not be perfect though.

Answer 1

This comes due to the constraints of material design. Picking a FlatButton you implicitly ask Flutter to design it for you so it respects the guidelines you can find yourself in Material Design official website here . In particular look at the sections about "Density", "Size and padding".

Long story short a FlatButton has 16 dp margin both sides.

Solution: use an InkWell - which I believe is what you want to use - since it comes with no margins.

Here the code and the result (please notice I replaced parameters and variables with constants)

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