最初の Flutter アプリ

このセクションでは、Flutter CLI を使用して新しい Flutter プロジェクトを作成し、アプリを実行し、最も基本的なコード構造を理解する方法を紹介します。

Flutter CLI を使用したプロジェクト作成

Flutter CLI は Flutter のコマンドラインツールで、Flutter プロジェクトの作成、管理、ビルドに使用されます。

新規プロジェクトの作成

ターミナルで次のコマンドを実行して、新しい Flutter プロジェクトを作成します：

$ flutter create my_first_app

ここでmy_first_appはプロジェクト名です。Flutter はこの名前に基づいて対応するフォルダとファイルを作成します。

プロジェクト名は小文字とアンダースコアを使用する必要があり、スペースや特殊文字を含めることはできません。

コマンドパラメータ

flutter createコマンドは複数のパラメータをサポートしています：

$ flutter create hello_world
Creating project "hello_world"...
  .gitignore                    2026-04-01 10:30:22
  .metadata                     2026-04-01 10:30:22
  analysis_options.yaml         2026-04-01 10:01:15
  pubspec.yaml                  2026-04-01 10:30:22
  README.md                     2026-04-01 10:30:22
  lib/
    main.dart                    2026-04-01 10:30:22
  test/
    widget_test.dart             2026-04-01 10:22:34
  android/
  ios/
  web/
  ...
Running "flutter pub get"...                     13.2s
Running "flutter analyze"...                     3.2s

Flutter アプリの実行

開発サーバーの起動

プロジェクトの作成が完了したら、プロジェクトディレクトリに移動してアプリを実行します：

$ cd hello_world
$ flutter run

初回の実行には時間がかかる場合があります。Flutter が Dart コードをコンパイルしてアプリを起動する必要があるためです。

実行デバイスの指定

お使いのコンピュータに複数のデバイス（またはエミュレータ）が接続されている場合は、-dパラメータを使用して実行デバイスを指定できます：

利用可能なデバイスの確認

次のコマンドを実行して、利用可能なすべての実行デバイスを確認します：

$ flutter devices

出力例：

2 connected devices:
Chrome (web)      • chrome           • web-javascript • Chrome  • web
Windows (windows) • windows          • windows        • x64    • Windows 10.0.0

ホットリロード機能

Flutter の最も強力な機能の 1 つがホットリロード（Hot Reload）です。アプリの実行中に：

1. コードを変更して保存する
2. ターミナルでr 键
3. アプリが再読み込みされ、最新の変更を確認できます

ホットリロードは非常に高速で、通常 1〜2 秒しかかかりません。これにより開発効率が大幅に向上し、UI の効果をリアルタイムでプレビューできます。

ホットリロードではアプリの状態が失われないため、アプリを再起動せずに UI デザインを迅速に反復できます。

main.dart ファイルの解説

すべての Flutter プロジェクトにはエントリファイルがありますlib/main.dart。デフォルトで生成される内容を見てみましょう：

例：main.dart コード

// lib/main.dart
// Flutter アプリのエントリファイル

// Material Design コンポーネントライブラリをインポート
import 'package:flutter/material.dart';

// アプリのエントリ関数
void main() {
  // runApp は Flutter の起動関数です
  // ルートウィジェットとして Widget を受け取ります
  runApp(const MyApp());
}

// ルート Widget（ステートレスコンポーネント）
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp は Material Design スタイルのルートコンポーネントです
    return MaterialApp(
      // アプリのタイトルを設定
      title: 'Flutter Demo',
      // テーマカラーを設定
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // Material 3 を使用
        useMaterial3: true,
      ),
      // アプリのメインページ
      home: const MyHomePage(title: 'Flutter ホームページ'),
    );
  }
}

// ステートフルコンポーネント（内部状態を持つことができます）
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // ページタイトル（不変）
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // カウンターの状態
  int _counter = 0;

  // カウンターを増加するメソッド
  void _incrementCounter() {
    // setState は Flutter に状態が変更されたことを通知し、UI の再構築を促します
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // Scaffold は Material Design のページの骨組みです
    return Scaffold(
      // AppBar は上部のアプリケーションバーです
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // ページタイトルを表示します
        title: Text(widget.title),
      ),
      // ページのメインコンテンツ
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('ボタンをクリックした回数：'),
            // カウンターの値を表示します
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      // フローティングアクションボタン
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '増加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

コード構造の説明