【Flutter入門第7回】Flutter 環境構築から Hello World まで ― はじめての Flutter アプリ

Posted at 2026-03-14

はじめに

ここまでの記事で Dart 言語の基本を学んできました。この記事からは、いよいよ Flutter を使ったアプリ開発に入ります。

Flutter は Google が開発したオープンソースの UI フレームワークで、1つのコードベースから iOS、Android、Web、Windows、macOS、Linux 向けのアプリを構築できます。

この記事では、Flutter の環境構築からプロジェクトの作成、Hello World アプリの実行までを解説します。

注意: この記事以降の Flutter コードは dart コマンド単体では実行できません。Flutter プロジェクト内で flutter run を使って実行することが前提です。

Flutter の特徴

1. クロスプラットフォーム

1つの Dart コードで複数のプラットフォーム向けにビルドできます。

プラットフォーム	対応状況
iOS	Stable
Android	Stable
Web	Stable
Windows	Stable
macOS	Stable
Linux	Stable

2. Hot Reload

コードを変更すると、アプリを再起動せずにリアルタイムで変更が反映されます。UI の調整が極めて高速に行えます。

3. Widget ベースの UI 構築

Flutter では UI のすべての要素が Widget です。Widget を組み合わせてツリー構造で画面を構築します。

4. 高パフォーマンス

Flutter は独自のレンダリングエンジン（Impeller / Skia）を使用しており、ネイティブに近いパフォーマンスを実現します。プラットフォームの UI コンポーネントへのブリッジが不要なため、描画が高速です。

環境構築

macOS の場合

1. Flutter SDK のインストール

方法A: Homebrew を使う場合（推奨）

brew install --cask flutter

方法B: 公式サイトからダウンロード

Flutter 公式サイトから Flutter SDK をダウンロード
任意のディレクトリに展開（例: ~/development/）

cd ~/development
unzip ~/Downloads/flutter_macos_arm64_x.x.x-stable.zip

PATH を設定

# ~/.zshrc に追加
export PATH="$HOME/development/flutter/bin:$PATH"

source ~/.zshrc

2. flutter doctor で環境確認

flutter doctor

出力例:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on macOS ...)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device (1 available)
[✓] Network resources

• No issues found!

すべてにチェックマーク [✓] が付いていれば環境構築は完了です。[!] や [✗] が表示された場合は、指示に従って不足しているツールをインストールしてください。

3. iOS 開発の準備（macOS のみ）

# Xcode のインストール（App Store から）
# コマンドラインツールの設定
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

# CocoaPods のインストール（Homebrew 推奨）
brew install cocoapods
# または: sudo gem install cocoapods

4. iOS シミュレータの起動

open -a Simulator

Windows の場合

1. Flutter SDK のインストール

Flutter 公式サイトから Flutter SDK をダウンロード
C:\src\flutter などに展開
環境変数 PATH に C:\src\flutter\bin を追加

または、Chocolatey を使う場合:

choco install flutter

2. Android Studio のインストール

Android Studio をインストール
Android Studio を起動し、SDK Manager から必要な SDK をインストール
Android エミュレータを作成（AVD Manager）

3. flutter doctor で確認

flutter doctor

IDE の設定

VS Code（推奨）

VS Code をインストール
拡張機能から以下をインストール:
- Flutter（公式拡張、Dart 拡張も自動的にインストールされる）

VS Code で Flutter 拡張をインストールすると、以下の機能が使えます:

コード補完
Widget のリアルタイムプレビュー
flutter run / flutter hot reload の統合
デバッグ支援

Android Studio

Android Studio を起動
Plugins から Flutter プラグインをインストール（Dart プラグインも自動インストール）
Flutter SDK のパスを設定

プロジェクトの作成

ターミナルで以下のコマンドを実行します。

flutter create my_first_app

出力:

Creating project my_first_app...
  ...
  my_first_app/lib/main.dart (created)
  my_first_app/pubspec.yaml (created)
  ...
Running "flutter pub get" in my_first_app...
Resolving dependencies...
Got dependencies.
Wrote 129 files.

All done!
...

作成されたディレクトリに移動します。

cd my_first_app

プロジェクト構造

my_first_app/
├── android/          # Android 固有のコード・設定
├── ios/              # iOS 固有のコード・設定
├── lib/              # Dart ソースコード（メインの開発場所）
│   └── main.dart     # アプリのエントリポイント
├── linux/            # Linux 固有のコード・設定
├── macos/            # macOS 固有のコード・設定
├── web/              # Web 固有のコード・設定
├── windows/          # Windows 固有のコード・設定
├── test/             # テストコード
│   └── widget_test.dart
├── pubspec.yaml      # プロジェクト設定・依存パッケージ管理
├── pubspec.lock      # 依存パッケージのバージョンロック
├── analysis_options.yaml  # 静的解析の設定
└── README.md

重要なファイル・ディレクトリ:

パス	説明
`lib/main.dart`	アプリのエントリポイント。`main()` 関数がここにある
`pubspec.yaml`	プロジェクト名、バージョン、依存パッケージ、アセットなどを管理
`android/`	Android 固有の設定（AndroidManifest.xml、build.gradle など）
`ios/`	iOS 固有の設定（Info.plist、Podfile など）
`test/`	ウィジェットテスト・ユニットテストを配置

デフォルトアプリの実行

エミュレータまたは実機を接続した状態で以下を実行します。

flutter run

デフォルトでは、ボタンを押すとカウントが増えるカウンターアプリが起動します。

main.dart の解説

flutter create で生成されるデフォルトの lib/main.dart の構造を解説します。以下は簡略化したコードです。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

各要素の解説

`main()` と `runApp()`

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

main(): Dart プログラムのエントリポイント
runApp(): Flutter アプリを起動する関数。引数に渡した Widget がアプリのルート Widget になる

`MaterialApp`

MaterialApp(
  title: 'Flutter Demo',           // アプリのタイトル（タスクスイッチャー等で表示）
  theme: ThemeData(                // アプリ全体のテーマ設定
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    useMaterial3: true,
  ),
  home: const MyHomePage(...),     // 最初に表示する画面
)

MaterialApp は Material Design に基づいたアプリの骨格を提供します。テーマ、ルーティング、ローカライゼーションなどの設定を行います。

`Scaffold`

Scaffold(
  appBar: AppBar(...),              // 画面上部のアプリバー
  body: Center(...),                // 画面の本体
  floatingActionButton: FloatingActionButton(...),  // 浮遊ボタン
)

Scaffold は Material Design のレイアウト構造を提供する Widget です。appBar、body、floatingActionButton、drawer、bottomNavigationBar などの領域を持ちます。

`AppBar`

AppBar(
  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  title: Text(widget.title),
)

画面上部に表示されるアプリケーションバーです。タイトルやアクションボタンを配置できます。

`FloatingActionButton`

FloatingActionButton(
  onPressed: _incrementCounter,  // タップ時のコールバック
  tooltip: 'Increment',         // 長押し時のツールチップ
  child: const Icon(Icons.add), // ボタン内のアイコン
)

画面の右下に浮遊する丸いボタンです。主要なアクションに使われます。

`setState()`

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

setState() を呼ぶと、Flutter フレームワークに状態の変更を通知し、build() メソッドが再実行されて UI が更新されます。StatefulWidget の状態管理の基本です（詳細は後の記事で解説します）。

Hello World に書き換える

デフォルトのカウンターアプリを、シンプルな Hello World に書き換えてみましょう。

lib/main.dart を以下の内容に置き換えます。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HelloWorldPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('はじめての Flutter'),
      ),
      body: const Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

このコードのポイント:

StatelessWidget を使用（状態を持たないシンプルな Widget）
Scaffold で画面の基本構造を定義
AppBar でタイトルバーを表示
Center で画面中央に配置
Text Widget でテキストを表示し、TextStyle で装飾

保存すると Hot Reload が自動的に適用され、画面に「Hello, Flutter!」と表示されます。

Hot Reload の体験

Hot Reload は Flutter の最大の特徴の一つです。

flutter run でアプリを起動
コードを変更して保存（例: テキストを 'Hello, Flutter!' から 'こんにちは、Flutter！' に変更）
ターミナルで r キーを押す（または VS Code / Android Studio の Hot Reload ボタンをクリック）
アプリが再起動せずに変更が即座に反映される

// 変更前
child: Text('Hello, Flutter!', ...),

// 変更後
child: Text('こんにちは、Flutter！', ...),

Hot Reload ではアプリの状態（State）が保持されるため、ログイン済みの画面やスクロール位置を維持したまま UI の変更を確認できます。

Hot Reload と Hot Restart の違い:

Hot Reload（r）: 変更したコードだけを反映。State は保持される

Hot Restart（R）: アプリ全体を再起動。State はリセットされる

pubspec.yaml の基本

pubspec.yaml はプロジェクトの設定ファイルです。

name: my_first_app
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ^3.5.0

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^4.0.0

flutter:
  uses-material-design: true
  # assets:
  #   - images/

主要セクションの説明

セクション	説明
`name`	プロジェクト名
`description`	プロジェクトの説明
`version`	バージョン番号（`major.minor.patch+build`）
`environment`	Dart SDK のバージョン制約
`dependencies`	本番で使用するパッケージ
`dev_dependencies`	開発時のみ使用するパッケージ（テスト、リント等）
`flutter`	Flutter 固有の設定（Material Design アイコン、アセット等）

パッケージの追加

例として、HTTP 通信ライブラリ http を追加する場合:

flutter pub add http

このコマンドは pubspec.yaml の dependencies に自動でエントリを追加し、flutter pub get を実行します。

手動で pubspec.yaml に追加する場合:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0   # 追加

追加後にパッケージを取得します。

flutter pub get

よく使う Flutter コマンド一覧

コマンド	説明
`flutter create <project_name>`	新規プロジェクト作成
`flutter run`	アプリの実行
`flutter run -d chrome`	Web ブラウザで実行
`flutter build apk`	Android APK のビルド
`flutter build ios`	iOS アプリのビルド
`flutter build web`	Web アプリのビルド
`flutter pub get`	パッケージの取得
`flutter pub add <package>`	パッケージの追加
`flutter doctor`	環境の診断
`flutter clean`	ビルドキャッシュの削除
`flutter test`	テストの実行
`flutter devices`	接続されたデバイスの一覧
`flutter upgrade`	Flutter SDK のアップグレード

トラブルシューティング

`flutter doctor` でエラーが出る場合

# 詳細を確認
flutter doctor -v

# Android ライセンスの承諾
flutter doctor --android-licenses

ビルドエラーが出る場合

# キャッシュをクリアして再ビルド
flutter clean
flutter pub get
flutter run

エミュレータが見つからない場合

# 利用可能なデバイスを確認
flutter devices

# Web ブラウザで実行（エミュレータ不要）
flutter run -d chrome

まとめ

この記事では以下を行いました。

Flutter の概要 を理解した（クロスプラットフォーム、Hot Reload、Widget ベース）
環境構築 を行った（Flutter SDK インストール、flutter doctor で確認）
プロジェクトを作成 した（flutter create）
プロジェクト構造 を理解した（lib/main.dart、pubspec.yaml）
デフォルトアプリを実行 した（flutter run）
Hello World に書き換えて Hot Reload を体験した

次の記事では、Widget の基本として StatelessWidget と MaterialApp の仕組みを詳しく学びます。

参考

@kotaro_ai_lab
AI活用や開発効率化について発信しています。フォローお気軽にどうぞ！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Flutter入門 第7回】Flutter 環境構築から Hello World まで ― はじめての Flutter アプリ

はじめに

Flutter の特徴

1. クロスプラットフォーム

2. Hot Reload

3. Widget ベースの UI 構築

4. 高パフォーマンス

環境構築

macOS の場合

1. Flutter SDK のインストール

2. flutter doctor で環境確認

3. iOS 開発の準備（macOS のみ）

4. iOS シミュレータの起動

Windows の場合

1. Flutter SDK のインストール

2. Android Studio のインストール

3. flutter doctor で確認

IDE の設定

VS Code（推奨）

Android Studio

プロジェクトの作成

プロジェクト構造

デフォルトアプリの実行

main.dart の解説

各要素の解説

main() と runApp()

MaterialApp

Scaffold

AppBar

FloatingActionButton

setState()

Hello World に書き換える

Hot Reload の体験

pubspec.yaml の基本

主要セクションの説明

パッケージの追加

よく使う Flutter コマンド一覧

トラブルシューティング

flutter doctor でエラーが出る場合

ビルドエラーが出る場合

エミュレータが見つからない場合

まとめ

参考

【Flutter入門第7回】Flutter 環境構築から Hello World まで ― はじめての Flutter アプリ

`main()` と `runApp()`

`MaterialApp`

`Scaffold`

`AppBar`

`FloatingActionButton`

`setState()`

`flutter doctor` でエラーが出る場合