Flutterでボタン幅を画面いっぱいにする方法
はじめに
FlutterでUIを調整する際、ボタンの幅を画面いっぱいにしたいことがあります。しかし、単にwidth: double.infinityを指定するだけでは、親ウィジェットの影響で意図した通りにならないことも。
この記事では、「なぜボタンの幅が意図した通りにならないのか？」 という疑問を解決しながら、3つの具体的な方法を解説していきます。
ボタン幅を画面いっぱいにする方法
Flutterでボタンを最大幅にする方法はいくつかあります。それぞれの特徴と使いどころを見ていきましょう。
方法1: SizedBox を使う（単独のボタン向け）
最も簡単な方法は SizedBox を使うことです。
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text("ファイルを選択"),
),
)
✅ ポイント:
-
SizedBox(width: double.infinity)によって ボタンの幅を強制的に最大化 します。 - 単体で置くボタン に適した方法です。
🚨 注意点:
-
RowやColumnの中にあると、意図したサイズにならないことがあります。
方法2: Expanded を使う（RowやColumnの中で使う場合）
Row や Column の中でボタンを最大幅にしたい場合は、Expanded を使用します。
Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () {},
child: Text("ファイルを選択"),
),
),
],
)
✅ ポイント:
-
Expandedを使うことで、親ウィジェット（RowやColumn）の幅いっぱいにボタンを広げる ことができます。 -
RowやColumnの中にボタンを配置する場合に適している ので、フォームのボタンなどでよく使われます。
🚨 注意点:
-
Expandedを使う場合、必ずRowまたはColumnの中 に配置する必要があります。
方法3: Flexible を使う（Expanded より自由度が欲しい場合）
Flexible は Expanded と似ていますが、他の要素とのバランスを考慮しながらサイズ調整をしたい場合 に向いています。
Row(
children: [
Flexible(
child: ElevatedButton(
onPressed: () {},
child: Text("ファイルを選択"),
),
),
],
)
✅ ポイント:
-
Expandedと異なり、ボタンのサイズを必要に応じて調整できる ので、レイアウトの自由度が高い。 - 他の要素と バランスをとりながら幅を調整する 場合に便利。
🚨 注意点:
-
Flexibleは 他の要素とのバランスに依存するため、場合によっては意図しないサイズになることがある ので、適用範囲を考慮する必要があります。
まとめ: どの方法を選べばいい？
ボタンを画面いっぱいに広げたい場合、状況に応じて適切な方法を選びましょう。
✅ 単独のボタンなら SizedBox(width: double.infinity)
✅ Row や Column の中なら Expanded
✅ 柔軟なレイアウト調整をしたいなら Flexible
🚀 おすすめの学習ポイント:
-
RowとColumnの違いを理解する。 -
ExpandedとFlexibleの違いを試しながら学ぶ。
適切なレイアウトを選んで、快適なUIを作っていきましょう！