Flutter の main.dart 完全解説

Flutter プロジェクトを作ると自動で生成される main.dart。
このファイルは Flutter アプリの基本構造を理解するための最高の教材です。

---

main.dart（日本語コメント付き）

import 'package:flutter/material.dart';  
// Flutter の UI 部品（ボタン・AppBar など）を使うための import

void main() {
  runApp(const MyApp()); 
  // runApp でアプリを起動。MyApp を一番最初に表示する。
}

---

アプリ全体を構成する StatelessWidget

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // ← これは "コンストラクタ"。
  // const は「不変のウィジェットとして最適化できる」という意味。
  // super.key は親クラス（StatelessWidget）の key を呼んでいる。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // アプリ名
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // アプリ全体の色設定。seedColor を変えるとテーマカラーが変わる。
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      // アプリ起動時に表示する最初の画面を指定。
    );
  }
}

---

状態を持つ画面（StatefulWidget）

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  // ← StatefulWidget のコンストラクタ
  // required this.title は「必ず title を渡さなければならない」意味
  // final String title; で受け取った値を保持する

  final String title;  
  // final = この変数は一度決まったら変更できない（不変）

  @override
  State<MyHomePage> createState() => _MyHomePageState();
  // MyHomePage の状態（State）を管理するクラスを返す
}

---

State クラス（画面の状態を管理する場所）

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  // _counter は「状態を持つ変数」
  // _ がついている → このファイル内だけで使えるプライベート変数

---

ボタンが押されたときにカウンターを増やす関数

  void _incrementCounter() {
    setState(() {
      // setState を呼ぶことで UI を更新できる
      // これを呼ばないと変数を更新しても画面が変わらない
      _counter++;
    });
  }

---

build() で画面の UI を作る

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Scaffold は AppBar・body・FloatingActionButton を配置できる土台

---

AppBar の設定

      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // アプリのテーマから色を取得
        title: Text(widget.title),
        // 親の MyHomePage から渡された title を表示
      ),

---

画面中央のカウンター表示

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // 縦方向の中心に配置
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            // 説明文
            Text(
              '$_counter', // カウンターの値
              style: Theme.of(context).textTheme.headlineMedium,
              // 大きめの文字スタイル
            ),
          ],
        ),
      ),

---

右下のボタン（押すとカウンターが増える）

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, 
        // ボタンが押されたらこの関数を呼ぶ
        tooltip: 'Increment', // 長押ししたときに出る説明
        child: Icon(Icons.add), // ＋ のアイコン
      ),
    );
  }
}

---

まとめ

この main.dart を理解すると、Flutter の基礎が完全に掴めます。

理解しておくべきポイントは次の通りです。

・StatelessWidget と StatefulWidget の違い
・コンストラクタ（const MyApp({super.key})）の役割
・final と _（プライベート）の意味
・setState() で画面が更新される仕組み
・build() が何度も再実行される
・Scaffold による画面構造
・FloatingActionButton の仕組み

---