Flutter ButtonRow padding - dart

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 padding between widgets.
I have two flutter ButtonRows in a Column which render with a quite large gap between them which I would like to eliminate. I guess it is caused by padding and have tried various approaches with no success so far. An extract from the code is as follows:
#override
Widget build(BuildContext context) {
return new Scaffold(
...
body: new Column(
...
children: <Widget>[
...
new Container(
margin: new EdgeInsets.all(0.0),
child: new Padding(
padding: new EdgeInsets.all(0.0),
child: new ButtonBar(
...
children: <Widget>[
new MaterialButton(
...
),
new MaterialButton(
...
),
),
),
),
),
new Container(
margin: new EdgeInsets.all(0.0),
child: new Padding(
padding: new EdgeInsets.all(0.0),
child: new ButtonBar(
...
children: <Widget>[
new MaterialButton(
...
),
new MaterialButton(
...
),
],
),
),
),
],
),
);
}

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: <Widget>[
new Container(
child: new Text("widget ButtonBar:"),
margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
),
new ButtonBar(children: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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.

Answer 2

Also, the ButtonBar itself has a buttonPadding attribute that you can customize.
Overrides the surrounding ButtonThemeData.padding to define the
padding for a button's child (typically the button's label).
If null then it will use the surrounding ButtonBarTheme.buttonPadding.
If that is null, it will default to 8.0 logical pixels on the left and
right.
ButtonBar(
buttonPadding: EdgeInsets.all(0),
children: <Widget>[
FlatButton(
child: Text('Hello'),
onPressed: () => print(),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),