【Flutter】画面レイアウト:Container使い方を3分で解説!(サンプルコードあり)

Flutterでレイアウトの整え方を知りたい
FlutterのContainerの使い方を忘れたので知りたい。

そこで、今回はFlutterContainerにおける基本的な使い方サンプルコードデモアプリで解説します。プログラミング初心者の方も0から分かるように簡単に解説します。不明点などありましたら、お気軽にお問い合わせ下さい。

この記事で分かること!
  • Containerって何?
  • Containerの使い方
  • Containerの基本プロパティ

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【Flutter】Containerとは?レイアウトを整えることができる

上記イメージのように画面レイアウトを整えることができるclassです。

Container classとは

A convenience widget that combines common painting, positioning, and sizing widgets.

(直訳)一般的なペイント、配置、およびサイズ変更のウィジェットを組み合わせた便利なウィジェット。

引用:Flutter公式サイト「Container class」
焼き芋

直訳するとContainerは入れ物、容器、箱、包装箱です。装飾もできるし、サイズも変えれる箱です。箱の中に箱も入れるので同じですね!

【Flutter】Containerのサンプルコードと使い方を解説

Containerサンプルコードは以下の通りです。コピペでそのまま使えます。

import 'package:flutter/material.dart';

void main() => runApp(ContainerDemo());

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Containerデモ')),
        body: Center(
          child: Container(
            child: Center(
              child: Text('child:contents',
                style: TextStyle(
                fontSize: 40,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    backgroundColor: Colors.blueAccent
                ),
              ),
            ),
            margin: const EdgeInsets.all(10.0),//外枠の余白
            width: 500.0,
            height: 200.0,
            padding: EdgeInsets.all(50.0),//内側の余白
            decoration: BoxDecoration(
              // 外枠線
              border: Border.all(
                color: Colors.blue.shade50,
                width: 20,
              ),
              borderRadius: BorderRadius.circular(10),
              color: Colors.blue.shade100,
            ),
          ),
        ),
      ),
    );
  }
}

サンプルコードのデモ画面

Containerの基本プロパティ

Containerの基本プロパティをしっかり押さえておきましょう!

プロパティ内容
margin外枠の余白を指定
borderContainerの枠線を指定
padding内枠の余白を指定
decoration: BoxDecorationContainerの装飾を指定(色、外枠線の太さ・色など)
color色を指定
childContainer内で1つのWidgetを作成
text文字を表示

まとめ:Flutter入門者はContainerは押さえておくべき!

今回はFlutterContainerにおける基本的な使い方サンプルコードデモ画面で解説しました。

レイアウトの基本なのでしっかり理解しときましょう!

Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次