【Flutter】Containerの基本的な使い方

この記事がおすすめな人

Flutterアプリ開発初心者
英語のFlutterドキュメントを読むのが難しい
Container Widgetの基本的な使い方が知りたい

Container (Flutter Widget of the Week)

Containerを使えば、背景、サイズ、余白、位置などを指定できます。

\ Widgetの扱い方が不安な方はこちら！ /

【Flutter】Widget・Widgetツリーの基本的な仕組み｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

Containerの基本となるプロパティ
サンプルコード

Containerの基本となるプロパティ

child：childとして扱われるWidgetを指定
height/width：高さ/幅を指定
color：背景色を指定
margin：枠の外側の余白を指定
padding：枠の内側の余白を指定
alignment：childの位置を指定

child

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

childを指定します。

height/width

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

heightプロパティで高さ、widthプロパティで幅を指定します。

color

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

colorプロパティで背景色を指定します。

color without children — childとContainerの範囲指定なし

仮に、Containerでchild, height, width, constraintsなど、Containerの範囲に指定がなければ、Containerはparent Widgetが許す範囲いっぱい広がります。(左の画像)

margin

Container(
  margin: EdgeInsets.all(50),
  height: 100,
  width: 100,
  color: Colors.red,
),

marginプロパティでWidgetの枠の外側の余白を指定します。また、marginの引数にEdgeInsets使用します。

>>【Flutter】marginプロパティの使い方｜EdgeInsets

padding

Container(
  padding: EdgeInsets.all(50),
  child: Text('Hello World'),
  height: 200,
  width: 200,
  color: Colors.yellow,
),

paddingプロパティでContainerの枠の内側の余白を指定します。また、paddingの引数にEdgeInsetsを使用します。

>>【Flutter】paddingプロパティの使い方｜EdgeInsets

alignment

Container(
  alignment: Alignment(0, 0),
  child: Text('Hello World'),
  height: 200,
  width: 200,
  color: Colors.yellow,
),

alignmentプロパティでchildを好きな位置に指定できます。また、alignmentの引数にAlignmentを代入します。

>>【Flutter】alignmentプロパティの使い方｜Alignment

サンプルコード

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('Flutter入門アカデミー'),
        ),
        body: Container(
          alignment: Alignment(0, 0),
          child: Text('Hello World'),
          height: 200,
          width: 200,
          color: Colors.yellow,
        ),
      ),
    );
  }
}