web-dev-qa-db-ja.com

Flutter：ボタンを親のサイズに拡張する方法は？

正方形のボタンを作成しようとしていますが、Expandedはコンテナの場合と同じように動作しないようです。例として次のコードを取り上げます

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Row(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

2つのボタンが表示されますが、これらのボタンは水平方向に展開されますが、垂直方向には展開されません。同時に、コンテナは水平および垂直の両方に拡張されます。次のことを行うと、同じ効果が発生します。

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Column(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

行を列に変更した場所。ボタンは垂直に拡張しますが、水平には拡張しませんが、コンテナーは両方を拡張します。

親と垂直および水平の両方に合わせてボタンを拡張する方法はありますか？

flutterflutter-layout
17
fuzzylogical

crossAxisAlignmentプロパティをRowに追加します。

crossAxisAlignment: CrossAxisAlignment.stretch
34
aziza

minWidth: double.infinityでButtonThemeでラップすると、制約を提供できます

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

または https://github.com/flutter/flutter/pull/19416 着陸

  MaterialButton(
    onPressed: () {},
    child: SizedBox.expand(
      width: double.infinity, 
      child: Text('Raised Button'),
    ),
  ),
12
Günter Zöchbauer

試してみることもできます

  1. SizedBoxを使用する

    SizedBox(
  width: double.maxFinite, // set width to maxFinite
  child: RaisedButton(...),
)

  2. MaterialButtonのminWidthプロパティを使用します。

    MaterialButton(
  minWidth: double.maxFinite, // set minWidth to maxFinite
  color: Colors.blue,
  onPressed: () {},
  child: Text("Button"),
)
1
CopsOnRoad