【Flutter】Containerの使い方｜基本のレイアウトボックス

2024年1月22日2024年2月5日

「任意のウィジェットの色やサイズ、余白など基本的なカスタマイズがしたい」

こんな時に便利なのが Container ウィジェットです。

ContainerはFlutterアプリでレイアウトを作成する際の基本となるレイアウトボックスです。任意のウィジェットを子要素とすることで色やサイズ、余白など様々なカスタマイズができます。

それではContainerの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

Containerの基本的な使い方について解説します。

Containerのchildプロパティにカスタマイズしたい任意のウィジェットを渡します(子ウィジェットなしで使用可能)。現時点では何も起きないですがContainerのプロパティを使用することで様々なカスタマイズができます。

Container(
  child: 任意のウィジェット,
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Container(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
              color: Colors.white,
            ),
          ),
          color: Colors.amber,
          alignment: Alignment.center,
          width: 250,
          height: 150,
        ),
      ),
    );
  }
}

カスタマイズ方法

続いてContainerのカスタマイズ方法について解説します。

色

Containerのボックスの色はcolorプロパティで設定できます。

Container(
  color: Colors.amber,
),

高さ・横幅

Containerの高さはheightプロパティ、横幅はwidthプロパティで設定できます。

Container(
  width: 250,
  height: 150,
),

ここでContainerの性質についてですが「親ウィジェットの制限範囲が定まっている状態」かつ「子ウィジェットが無い状態」でwidthまたはheightのサイズを設定しない場合、Containerは親ウィジェットが許す範囲いっぱいに広がります。

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Container(
          color: Colors.amber,
        ),
      ),
    );
  }
}

一方で「親ウィジェットがColumnやRow、ListViewなど制限範囲が定まっていない状態」かつ「子ウィジェットが無い状態」でwidthまたはheightのサイズを設定しない場合、Containerは最小限小さくなります。

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Column(
        children: [
          Container(
            color: Colors.amber,
          ),
        ],
      ),
    );
  }
}

また子ウィジェットが指定されている状態でwidthまたはheightのサイズを設定しない場合、Containerは子ウィジェットと同等のサイズまで小さくなります。

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Container(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
              color: Colors.white,
            ),
          ),
          color: Colors.amber,
        ),
      ),
    );
  }
}

外側の余白

Containerの外側の余白はmarginプロパティで設定できます。

marginプロパティの引数にはEdgeInsetsウィジェットを渡します。EdgeInsetsのコンストラクタには次の4種類があり余白を使用できます。

コンストラクタ	位置
EdgeInsets.all(数値)	全方向に余白
EdgeInsets.symmetric(vertical: 数値, horizontal: 数値)	垂直・水平方向に余白
EdgeInsets.only(left: 数値, top: 数値, right: 数値, bottom: 数値)	任意の方向のみ余白
EdgeInsets.fromLTRB(数値, 数値, 数値, 数値)	左上右下の順で余白を指定

Card(
  margin: EdgeInsets.symmetric(horizontal: 50),
  child: Text('Hello World'),
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Container(
        child: Text(
          'Hello World',
          style: TextStyle(
            fontSize: 30,
            color: Colors.white,
          ),
        ),
        margin: EdgeInsets.only(left: 20, top: 90),
        color: Colors.amber,
        width: 250,
        height: 150,
      ),
    );
  }
}

内側の余白

Containerの内側の余白はpaddingプロパティで設定できます。

paddingプロパティの引数にはEdgeInsetsウィジェットを渡します。

コンストラクタ	位置
EdgeInsets.all(数値)	全方向に余白
EdgeInsets.symmetric(vertical: 数値, horizontal: 数値)	垂直・水平方向に余白
EdgeInsets.only(left: 数値, top: 数値, right: 数値, bottom: 数値)	任意の方向のみ余白
EdgeInsets.fromLTRB(数値, 数値, 数値, 数値)	左上右下の順で余白を指定

Container(
  child: Text('Hello World'),
  padding: EdgeInsets.only(left: 20, top: 90),
  color: Colors.amber,
  width: 250,
  height: 150,
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Container(
        child: Text(
          'Hello World',
          style: TextStyle(
            fontSize: 30,
            color: Colors.white,
          ),
        ),
        margin: EdgeInsets.only(left: 20, top: 90),
        color: Colors.amber,
        width: 250,
        height: 150,
      ),
    );
  }
}

子ウィジェットの位置

Containerの子ウィジェットの位置をalignmentプロパティで設定できます。

alignmentプロパティの引数にAlignmentウィジェットの列挙型(enum)またはコンストラクタを渡すことで次のような様々な配置を指定できます。

位置	列挙型	コンストラクタ
左上	Alignment.topLeft	Alignment(-1.0, -1.0)
中央上	Alignment.topCenter	Alignment(0.0, -1.0)
右上	Alignment.topRight	Alignment(1.0, -1.0)
中央左	Alignment.centerLeft	Alignment(-1.0, 0.0)
中央	Alignment.center	Alignment(0.0, 0.0)
中央右	Alignment.centerRight	Alignment(1.0, 0.0)
左下	Alignment.bottomLeft	Alignment(-1.0, 1.0)
中央下	Alignment.bottomCenter	Alignment(0.0, 1.0)
右下	Alignment.bottomRight	Alignment(1.0, 1.0)

Container(
  child: Text('Hello World'),
  alignment: Alignment.bottomRight,
  color: Colors.amber,
  width: 250,
  height: 150,
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Container(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
              color: Colors.white,
            ),
          ),
          alignment: Alignment.bottomRight,
          color: Colors.amber,
          width: 250,
          height: 150,
        ),
      ),
    );
  }
}

まとめ

今回はContainerの基本的な使い方とカスタマイズ方法について解説しました。

ContainerはFlutterアプリでレイアウトを作成する際の基本となるレイアウトボックスです。任意のウィジェットを子要素とすることで色やサイズ、余白など様々なカスタマイズができるので、機会があればぜひ使ってみてください。

参考サイト

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