【Flutter】Column の使い方

2024年8月17日2024年8月27日

※本記事で使用している環境

＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh

＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）

前回は、Container Widget についての解説を行いました。

はじめに

公式ドキュメントの解説は、以下のページにあります。

https://api.flutter.dev/flutter/widgets/Column-class.html

記事を執筆するにあたって、以下の書籍を参考にしました。

おすすめ書籍

リンク

ウィジェットを縦に並べる手順

まずは、Column Widget を使って、ウィジェットを縦に並べる方法を紹介します。

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                color: Colors.amber,
                width: 100,
                height: 100,
                child: Text("Container 1"),
              ),
              Container(
                color: Colors.teal,
                width: 100,
                height: 100,
                child: Text("Container 2"),
              ),
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("Container 3"),
              ),
            ],
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

準備

一旦、以下のコードを入力してください。

このコードを元に様々な変更を加えていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.amber,
            width: 100,
            height: 100,
            child: Text("Container"),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

Container Widget にカーソルを合わせて、command ＋ . を押す

Container Widget にカーソルを合わせた状態で、以下のキーボードコマンドを押します。

Mac　command　＋　.
Win　Ctrl　＋　.

STEP

Wrap with Column をクリック

様々な項目が表示されますので、「Wrap with Column」をクリックします。

STEP

Container Widget が Column Widget に包まれる

STEP

Container Widget を一つ追加する

Container Widget の色や大きさは、好きなように設定してみましょう。

STEP

Container Widget をもう一つ追加する

STEP

「mainAxisAligment」プロパティを書いて、MainAxisAligment を設置する

これは、ウィジェットの縦の配置を設定する方法です。

MainAxisAligment の値を変更することで、様々な配置に設定できます。

MainAxisAligment の公式ドキュメントはこちらです。

https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html

ウィジェットとウィジェットの間に空白を作る手順

次に、ウィジェットとウィジェットの間に空白を作っていきます。

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Container(
                color: Colors.amber,
                width: double.infinity,
                height: 100,
                child: Text("Container 1"),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.teal,
                width: 100,
                height: 100,
                child: Text("Container 2"),
              ),
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("Container 3"),
              ),
            ],
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

Container Widget の下に SizedBox Widget を設置し、「height」の値を入力する

SizedBox Widget の公式ドキュメントはこちらです。

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

ウィジェットの横の配置を設定する手順

ウィジェットの大きさを横に引き伸ばしたり、配置を変えたりしていきます。

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.amber,
                width: 100,
                height: 100,
                child: Text("Container 1"),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.teal,
                width: 100,
                height: 100,
                child: Text("Container 2"),
              ),
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("Container 3"),
              ),
            ],
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

「width」プロパティの値を 1000 に変更する