Flutter ButtonRow padding

Question

私はDartでFlutterでアプリを開発していますが、レイアウトはかなりわかりやすいと思います。しかし、私は、ウィジェット間のデフォルトのパディングに関連すると思う問題にぶち当たっています。

私は2つのフラッターButtonRowsをColumn内に置いていますが、それらの間にかなりのギャップがあります。私はそれがパディングによって引き起こされたと思っていて、これまでのところ成功していない様々なアプローチを試してきました。次のようにコードからの抜粋です：

@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

あなたはボタンをカスタマイズするさまざまな方法があります。

• のButtonBar
• 使用Rowの代わりのButtonBar
• ため​​をカスタマイズで独自のボタンを実装しますInkWell
• 等

使用する方法は、ケース/要件によって異なります。ここでは、さまざまな方法の簡単な例：

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が、この場合に役立ちます。