Flutterで画面縦一杯にウェジットを配置する

Flutterで画面縦一杯にウィジェットを配置する

Flutterでモバイルアプリを開発する際、時にはウィジェットを画面全体に広げたい場面があります。例えば、背景や画像を画面いっぱいに表示したい時などです。今回は、Flutterで簡単に画面縦一杯にウィジェットを配置する方法を紹介します。

縦一杯にウェジットを配置するサンプルコード

以下のサンプルコードは、Expanded ウィジェットを使用して、子ウィジェット（この場合は Container）を画面全体に広げる方法です。Expanded ウィジェットは、余分なスペースを埋めるために、その親ウィジェットの中で拡張されます。

Widget build(BuildContext context) {
  return Scaffold(
    body: Column (
      children: [
        Expanded(
          child: Container(
            decoration: const BoxDecoration(color: Colors.blueAccent),
            child: const Center(child: Text("画面いっぱい"),),
          ),
        ),
      ],
    ),
  );
}

まとめ

この方法を使用することで、Flutterで簡単に画面いっぱいにウィジェットを展開することができます。背景、広告スペース、画像など、さまざまな用途に応じて利用可能です