Flutterのチュートリアルを学んでみた(7)

Containerウィジェットをマスターしよう！ 📦

Containerってなに？ 🤔

Containerは、中身を自由にカスタマイズできる箱のようなものです！
例えば：

• 大きさを変える
• 色を付ける
• 余白を作る
• 中身の位置を調整する

など、いろんなことができます！

基本の形 📝

まずは、青い四角を作ってみましょう：

Container(
  color: Colors.blue,    // 青色に塗る
  width: 300.0,         // 幅300
  height: 300.0,        // 高さ300
)

色の付け方 🎨

方法1：Colorsクラスを使う（簡単！）

Container(
  color: Colors.blue,      // 基本の青
  // color: Colors.green,  // 緑
  // color: Colors.red,    // 赤
)

色の濃さも変えられます：

Container(
  color: Colors.blue[900],      // とても濃い青
  // color: Colors.blue[100],   // とても薄い青
)

使える数値：50, 100, 200, 300, 400, 500, 600, 700, 800, 900

方法2：自分で色を作る（難しいけど自由！）

Container(
  color: Color(0xFF42A5F5),                    // 16進数で指定
  // color: Color.fromRGBO(66, 165, 245, 1.0), // RGBで指定
)

文字を入れてみよう 📝

Container(
  color: Colors.blue,
  width: 300.0,
  height: 300.0,
  child: Text('こんにちは！'),  // この行を追加！
)

余白を付けよう 📏

内側の余白（Padding）

Container(
  color: Colors.blue,
  width: 300.0,
  height: 300.0,
  child: Text('こんにちは！'),
  padding: EdgeInsets.all(50.0),  // 全方向に50の余白
)

特定の方向だけ余白を付けたい場合：

padding: EdgeInsets.only(
  top: 50.0,    // 上だけ
  left: 20.0,   // 左だけ
)

外側の余白（Margin）

Container(
  color: Colors.blue,
  width: 300.0,
  height: 300.0,
  child: Text('こんにちは！'),
  margin: EdgeInsets.all(100.0),  // 外側に余白
)

中身の位置を調整しよう 🎯

Container(
  color: Colors.blue,
  width: 300.0,
  height: 300.0,
  child: Text('こんにちは！'),
  alignment: Alignment.center,  // 真ん中に配置
)

使える位置：

• 上：topLeft, topCenter, topRight
• 真ん中：centerLeft, center, centerRight
• 下：bottomLeft, bottomCenter, bottomRight

形を変えてみよう 🔄

回転させる：

Container(
  color: Colors.blue,
  width: 300.0,
  height: 300.0,
  child: Text('こんにちは！'),
  transform: Matrix4.rotationZ(0.1),  // 少し傾ける
)

やってみよう！ 🌟

1. 違う色を試してみる

Container(
  color: Colors.purple,  // 紫にしてみる
)

1. 大きさを変えてみる

Container(
  width: 200.0,   // もっと小さく
  height: 100.0,  // 横長に
)

1. 余白を組み合わせてみる

Container(
  padding: EdgeInsets.all(20.0),
  margin: EdgeInsets.only(top: 50.0),
)

困ったときは？ 🆘

• 色が反映されない
  → colorプロパティのスペルを確認
• 大きさが変わらない
  → widthとheightの単位（.0）を確認
• 位置がおかしい
  → alignmentの値を確認

次は何ができる？ 🎯

• 複数のContainerを組み合わせる
• 角を丸くする
• 影を付ける
• アニメーションを付ける

チャレンジ問題 💪

1. 赤い箱の中に青い文字を表示してみよう
2. 箱を少し傾けて、余白も付けてみよう
3. 自分の好きな色の組み合わせで箱を作ってみよう

がんばって練習してみましょう！
Containerをマスターすれば、もっと素敵なアプリが作れますよ！ 🎨