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

Container基本
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • Container Widgetの基本的な使い方が知りたい
Container (Flutter Widget of the Week)

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 with children
childの指定あり
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

margin あり
margin あり
margin なし
margin なし

padding

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

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

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

padding あり
padding あり
padding なし
padding なし

alignment

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

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

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

Alignment(-1, -1)
Alignment(-1, -1)
Alignment(0, 0)
Alignment(0, 0)
Alignment(1, 1)
Alignment(1, 1)

サンプルコード

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

タイトルとURLをコピーしました