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

Flutterのレイアウトを学ぼう！基礎編 🎨

はじめに 👋

レゴブロックで遊んだことありますか？
Flutterのレイアウトは、レゴブロックを組み立てるようなものです。
小さなパーツ（Widget）を組み合わせて、素敵なアプリを作っていきます！

Widgetって何だろう？ 🧩

Flutterでは、画面に表示する全てのものを「Widget」と呼びます：

• 文字 → Textウィジェット
• 画像 → Imageウィジェット
• ボタン → Buttonウィジェット
• 箱 → Containerウィジェット

レイアウトの基本パーツを見てみよう！ 📦

1. Container（箱）ウィジェット 📦

Containerは、中に物を入れられる箱のようなものです：

Container(
  padding: EdgeInsets.all(8.0),  // 内側の余白
  margin: EdgeInsets.all(8.0),   // 外側の余白
  color: Colors.blue,            // 背景色
  child: Text('こんにちは！'),    // 中身
)

できること：

• 余白をつける（padding, margin）
• 色を付ける（color）
• 枠線をつける（border）
• 角を丸くする（borderRadius）

2. Row（横並び）とColumn（縦並び）🎯

Row（横並び）

Row(
  children: [
    Icon(Icons.star),
    Text('星'),
    Icon(Icons.moon),
    Text('月'),
  ],
)

Column（縦並び）

Column(
  children: [
    Icon(Icons.sun),
    Text('太陽'),
    Icon(Icons.cloud),
    Text('雲'),
  ],
)

3. レイアウトを見やすくする方法 🔍

デバッグモードを使うと、レイアウトが見やすくなります：

import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = true;  // これを追加！
  runApp(MyApp());
}

これで、こんなことが見えるようになります：

• ウィジェットの範囲
• 余白の大きさ
• 位置関係

マテリアルデザインを使ってみよう 🎨

簡単な方法（おすすめ）

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '私のアプリ',
      home: Scaffold(
        appBar: AppBar(
          title: Text('かわいいアプリ'),
        ),
        body: Center(
          child: Text('こんにちは！'),
        ),
      ),
    );
  }
}

自由な方法（上級者向け）

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: Center(
        child: Text(
          'こんにちは！',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

やってみよう！ 🌟

1. Containerの色を変えてみる

Container(
  color: Colors.pink,  // 好きな色に変えてみよう！
  child: Text('ピンクの箱'),
)

1. 横並びと縦並びを組み合わせる

Column(
  children: [
    Row(
      children: [
        Icon(Icons.star),
        Text('星'),
      ],
    ),
    Row(
      children: [
        Icon(Icons.moon),
        Text('月'),
      ],
    ),
  ],
)

大切なポイント ⭐️

1. Containerは便利な箱
2. Rowは横並び、Columnは縦並び
3. MaterialAppを使うと簡単にきれいなデザインができる
4. debugPaintSizeEnabledで構造が見やすくなる

次は何ができる？ 🎯

• 複雑なレイアウトを作る
• アニメーションをつける
• タップできる要素を追加する
• スクロールできるリストを作る

実験してみよう！ 🔬

1. 違う色を試してみる
2. 余白の大きさを変えてみる
3. テキストとアイコンを組み合わせてみる

困ったときは？ 🆘

• 位置がおかしい
  → debugPaintSizeEnabledで確認
• 文字が表示されない
  → TextStyleを確認
• レイアウトが崩れる
  → Containerで囲んでみる

がんばってレイアウトの練習をしましょう！
あなたなら素敵なアプリが作れるはず！ 💪