Flutter ButtonRow padding

Question

I am developing an app in Flutter with Dart and am generally finding layout quite straightforward. However, I am running into a problem which I think is related to default padd

Answer 1

You have different ways to customize buttons:

• customize ButtonTheme for ButtonBar
• use Row instead of ButtonBar
• implement your own button via InkWell
• etc

What to use depends on your cases/requirements. Here quick example of different ways:

class ButtonRowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Buttons"),
      ),
      body: new Column(mainAxisSize: MainAxisSize.min, children: [
        new Container(
          child: new Text("widget ButtonBar:"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new ButtonBar(children: [
          new FlatButton(
            child: new Text("Button 1"),
            onPressed: () => debugPrint("Button 1"),
          ),
          new FlatButton(
            child: new Text("Button 2"),
            onPressed: () => debugPrint("Button 2"),
          )
        ]),
        new Container(
          child: new Text("widget ButtonBar with custom ButtomTheme:"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new ButtonTheme(
          minWidth: 44.0,
          padding: new EdgeInsets.all(0.0),
          child: new ButtonBar(children: [
            new FlatButton(
              child: new Text("Button 1"),
              onPressed: () => debugPrint("Button 1"),
            ),
            new FlatButton(
              child: new Text("Button 2"),
              onPressed: () => debugPrint("Button 2"),
            ),
          ]),
        ),
        new Container(
          child: new Text("widget Row with FlatButton:"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new Row(
          children: [
            new FlatButton(
              child: new Text("Button 1"),
              onPressed: () => debugPrint("Button 1"),
            ),
            new FlatButton(
              child: new Text("Button 2"),
              onPressed: () => debugPrint("Button 2"),
            ),
          ],
        ),
        new Container(
          child: new Text("widget Row with InkWell"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new Row(
          children: [
            new InkWell(
              child: new Text("Button 1"),
              onTap: () => debugPrint("Button 1"),
            ),
            new InkWell(
              child: new Text("Button 2"),
              onTap: () => debugPrint("Button 2"),
            ),
          ],
        )
      ]),
    );
  }
}

Debug paint can be helpful in this case.