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

2021 7/14

2021.04.16 2021.07.14

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

FlutterのUIを構築するWidgetとは？ Widgetの役割・基本的な使い方を分かりやすく解説Flutterに使用される「Widget」って何？FlutterアプリのUIはどうやって構築されているの？このような疑問にお答えします。結論WidgetとはFlutterアプリのUIを構築してい…

ティファ

本記事では「Container Widget」の基本的な使い方について紹介していくよ！

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,
        ),
      ),
    );
  }
}