【Flutter】Columnの要素を横幅いっぱいに表示

2023年10月3日

FlutterでColumnの要素を横幅いっぱいに表示する方法を紹介します。

Columnの基本的な使い方、知っておきたい基本プロパティのまとめ記事はこちら↓

あわせて読みたい

【Flutter】Columnの使い方｜垂直に複数のウィジェットを並べる Columnの基本的な使い方について解説します。Columnを使用することで複数のウィジェットを垂直に並べられます。また並んでいるウィジェットの配置を指定したり、逆順にしたりなどできます。

Columnを横幅いっぱいに表示する方法

Columnの要素を横幅いっぱいに表示するにはSizedBoxを使用します。

使用方法としてはSizedBoxの子ウィジェットとしてColumnを指定し、widthにdouble.infinityを渡します。

SizedBox(
  width: double.infinity,
  child: Column(
    children: [
      ...　　
    ],
  ),
)

Columnの要素を横幅いっぱいに表示する方法

Columnの要素を横幅いっぱいに表示したい場合は、次のように要素のwidthを指定せずheightのみ指定します。

SizedBox(
  width: double.infinity,
  child: Column(
    children: [
      Container(
        height: 150,
        color: Colors.red,
      ),
      Container(
        height: 150,
        color: Colors.yellow,
      ),
      Container(
        height: 150,
        color: Colors.blue,
      ),
    ],
  ),
)

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            children: [
              Container(
                height: 150,
                color: Colors.red,
              ),
              Container(
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                height: 150,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}