🥡

Container Widget 基礎

2024/03/16に公開

Flutter

はじめに

今回は重要なWidgetの１つであるContainer Widgetについてまとめていこうと思います。

Container Widgetとはものを入れる箱のようなものです。複数の子ウィジェットなどを収容し、位置、色、サイズなどを変更することで効率的に管理することができます以下の画像はTop Flutter Interviewに書いてある図ですがわかりやすいので参考にさせてもらいます。基本的なコンテナは、子Widgetを囲むpadding、margin、borderプロパティを持っています。

実際に自分自身でコードを書いてみて確認しました。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Container Demo'),
            backgroundColor: Colors.green,
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(
                  color: Colors.yellow,
                  width: 10,
                ),
              ),
              margin: const EdgeInsets.all(50),
              padding: const EdgeInsets.all(50),
              width: double.infinity,
              height: double.infinity,
              child: Container(
                color: Colors.blue,
              ),
            ),
          )),
    );
  }
}

上記のコードを実行すると以下のようになります。

青色がchild、赤色がpadding、黄色がborder、白がmarginの部分です。画像と同じようなものが確認できました。

基本的なプロパティ

Containerの基本的なプロパティとしては以下のようなものがあります。
child: Container内に配置するWidgetです。Containerは１つの子Wigetを持ちます。複数持ちたい場合には、このWidgetの子をchildrenプロパティの持つRowやColumnなどにし、そのWidgetに子を与えるようにします。
color: Containerの背景色を指定できます。
padding: 子WidgetとCotainerの間の余白を指定します。
margin: Containerの外側の余白を指定します。
width: Containerの幅を指定します。
height: Containerの高さを指定します。
decoration: Containerの装飾を指定します。

おわりに

今回はContainer Widgetの基本的な内容についてまとめました。他にもいろんなプロパティなどもあるので、何か作りながら理解を深めていきたいと思います。最後まで読んでいただきありがとうございます。

Container Widget 基礎

はじめに

Container Widgetとは

基本的なプロパティ

おわりに

参考文献

Discussion