Flutter

【Flutter入門】Containerの使い方

こんにちは、アプリ開発者のテルです!

「Containerの使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. Containerの使い方がわかるようになる
  2. 使用例を用いた解説で初心者でも理解できる

Containerの基本的な使い方

Containerは基本的に単なるレイアウトボックスです。色、位置、サイズ、子Widgetなどを作成できるプロパティが用意されています。

Containerの基本的なプロパティは下記の通りです。

プロパティ内容
child単一のWidgetを作成
color色の指定
alignmentchild Widgetの位置を指定
height/width高さ/幅の指定
margin外側の余白を指定
padding内側の余白を指定

それでは使用例を用いて、1つずつ解説していきます!

child

childは、単一のWidgetを作成することができるプロパティです。Textが代表例です。

Container(
  child: Text('Hello World!'),
),

color

colorは色を指定することができるプロパティです。

Container(
  color: Colors.blue,
  child: Text('Hello World'), 
),

alignment

alignmentchild Widgetの位置を座標で指定することができるプロパティです。

・Alignment(0.0, 0.0) = 中心に配置

・Alignment(-1.0, -1,0) = 左上に配置

・Alignment(1.0, 1.0) = 右下に配置

Container(
  alignment: Alignment(0.0, 0.0),
  child: Text('Hello World'),
  color: Colors.yellow,
),

使用例

child,color,alignmentを用いた使用例は下記の通りです。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          // child Widgetの位置を中央に指定
          alignment: Alignment(0.0, 0.0),
          // 色を青に指定
          color: Colors.blue,
          // テキストウィジェットを作成
          child: Text(
            'Hallo World',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 50,
            ),
          ),
        ),
      ),
    ),
  );
}

height/width

heightは高さ、widthは幅を指定することができるプロパティです。

Container(
  height: 100,
  width: 200,
),

margin

marginは外側の余白を指定することができるプロパティです。下記の通り、余白の指定方法はいくつかあります。

EdgeInsets.all(数値)全方向の余白
EdgeInsets.symmetric(vertical: 数値, horizontal: 数値)垂直/水平の余白
EdgeInsets.fromLTRB(数値, 数値, 数値, 数値)各全方向の余白
EdgeInsets.only(方向: 数値)1方向の余白
Container(
  margin: EdgeInsets.all(50),
  height: 100,
  width: 100,
  color: Colors.red,
),

padding

paddingは内側の余白を指定することができるプロパティです。marginと同じように余白の指定方法はいくつかあります。

EdgeInsets.all(数値)全方向の余白
EdgeInsets.symmetric(vertical: 数値, horizontal: 数値)垂直/水平の余白
EdgeInsets.fromLTRB(数値, 数値, 数値, 数値)各全方向の余白
EdgeInsets.only(方向: 数値)1方向の余白
Container(
  padding: EdgeInsets.all(50),
  child: Text('Hello World'),
  height: 200,
  width: 200,
  color: Colors.yellow,
),

使用例

height/width,margin,paddingを用いた使用例は下記の通りです。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.red,
            child: Container(
              // 高さを100,幅を400に指定
              height: 100,
              width: 400,
              // 外側の余白を20に指定
              margin: EdgeInsets.all(20),
              // 内側の余白を20に指定
              padding: EdgeInsets.all(20),
              color: Colors.blue,
              child: Text(
                'Hallo World',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 50,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

まとめ

今回は、Containerの使い方について解説しました。

Containerはよく使う基本的なWidgetです。そのため、今回解説した内容をしっかりと押さえておきましょう。

▼Flutterの効率的な勉強法を下記でご紹介しています。

【2022年版】Flutterの効率的な勉強法!具体的な手順を解説

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

参考文献
Flutter関連の書籍を出版しました!