Flutterでボタン幅を画面いっぱいにする方法

はじめに

FlutterでUIを調整する際、ボタンの幅を画面いっぱいにしたいことがあります。しかし、単にwidth: double.infinityを指定するだけでは、親ウィジェットの影響で意図した通りにならないことも。

この記事では、「なぜボタンの幅が意図した通りにならないのか？」 という疑問を解決しながら、3つの具体的な方法を解説していきます。

Flutterでボタンを最大幅にする方法はいくつかあります。それぞれの特徴と使いどころを見ていきましょう。

最も簡単な方法は SizedBox を使うことです。

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: () {},
    child: Text("ファイルを選択"),
  ),
)

✅ ポイント:

🚨 注意点:

Row や Column の中でボタンを最大幅にしたい場合は、Expanded を使用します。

Row(
  children: [
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: Text("ファイルを選択"),
      ),
    ),
  ],
)

✅ ポイント:

🚨 注意点:

Flexible は Expanded と似ていますが、他の要素とのバランスを考慮しながらサイズ調整をしたい場合 に向いています。

Row(
  children: [
    Flexible(
      child: ElevatedButton(
        onPressed: () {},
        child: Text("ファイルを選択"),
      ),
    ),
  ],
)

✅ ポイント:

🚨 注意点:

ボタンを画面いっぱいに広げたい場合、状況に応じて適切な方法を選びましょう。

✅ 単独のボタンなら SizedBox(width: double.infinity)
✅ Row や Column の中なら Expanded
✅ 柔軟なレイアウト調整をしたいなら Flexible

🚀 おすすめの学習ポイント:

適切なレイアウトを選んで、快適なUIを作っていきましょう！