【Flutter】Container の使い方

2024年8月16日2024年8月28日

※本記事で使用している環境

＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh

＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）

前回は、SafeArea Widget についての解説を行いました。

はじめに

公式ドキュメントの解説は、以下のページにあります。

https://api.flutter.dev/flutter/widgets/Container-class.html

記事を執筆するにあたって、以下の書籍を参考にしました。

おすすめ書籍

リンク

Container Widget に色をつける手順

前回使ったファイルで解説を行っていきます。

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.amber,
            child: Text("Hello Container"),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

Container Widget の中に「color」プロパティを書いて、「Colors.amber」と記述する

画面のように、Container Widget の中が橙色になりました。

STEP

Text Widget をコメントアウト

Text Widget を消すと、このようにContainer Widget 野中が一面に色がつきます。

STEP

一旦、完成！

Container の大きさや余白を設定する手順

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.amber,
            width: 200,
            height: 200,
            margin: EdgeInsets.only(left: 50.0, top: 50.0),
            padding: EdgeInsets.all(20.0),
            child: Text("Hello Container"),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

Container Widget がどんなプロパティを持っているのか確認する