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

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

ティファ

本記事では「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,
        ),
      ),
    );
  }
}

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる