Flutter とは？2025 年版：仕組み・強み・向いているプロダクトを徹底解説

2025年10月23日

Flutter

Flutter とは？2025 年版：仕組み・強み・向いているプロダクトを徹底解説

モバイルアプリ開発の選択肢が増える中で、「一度書けば複数のプラットフォームで動くアプリ」への注目が高まっています。その中でも Flutter は、Google が開発したクロスプラットフォーム開発フレームワークとして、高いパフォーマンスと美しい UI が実現できることから人気を集めています。

本記事では、2025 年現在の Flutter について、その仕組みや他フレームワークとの違い、実際にどのようなプロダクトに向いているのかを詳しく解説します。Flutter を初めて触る方でも理解できるよう、基礎から丁寧に説明していきますので、ぜひ最後までお読みください。

Flutter とは

Flutter の概要

Flutter は、Google が 2018 年に正式リリースしたオープンソースのクロスプラットフォーム開発フレームワークです。iOS、Android、Web、デスクトップ（Windows、macOS、Linux）に対応しており、単一のコードベースから複数のプラットフォーム向けアプリを開発できます。

Dart という Google が開発したプログラミング言語を採用しており、高速な描画エンジンとリッチな UI コンポーネント（Widget）を提供することで、ネイティブアプリと遜色ないパフォーマンスを実現しています。

Flutter の特徴

Flutter の最大の特徴は、独自の描画エンジン Skia を採用している点にあります。これにより、OS のネイティブコンポーネントに依存せず、どのプラットフォームでも一貫した見た目と動作を実現できます。

また、Hot Reload という機能により、コードの変更をすぐにエミュレータや実機で確認できるため、開発効率が格段に向上します。UI の微調整やデバッグが素早く行えるのは、開発者にとって大きなメリットでしょう。

さらに、Flutter は Widget ベース の設計思想を採用しており、すべての UI 要素が Widget として表現されます。これにより、UI の構成がコードから明確に理解でき、再利用性も高まります。

以下の図は、Flutter アプリが動作する基本的な構造を示したものです。

mermaidflowchart TB
  app["Flutter アプリケーション<br/>(Dart コード)"]
  framework["Flutter Framework<br/>(Widget, Rendering)"]
  engine["Flutter Engine<br/>(Skia 描画エンジン)"]
  platform["プラットフォーム<br/>(iOS, Android, Web...)"]

  app --> framework
  framework --> engine
  engine --> platform

この図から、Flutter アプリは Dart で記述され、Flutter Framework を経由して描画エンジンが各プラットフォームにレンダリングしていることがわかります。

Flutter の仕組み

Dart 言語について

Flutter は Dart という言語で記述します。Dart は Google が開発した、オブジェクト指向のプログラミング言語で、JavaScript のような柔軟性と、Java や C# のような静的型付けの安全性を兼ね備えています。

Dart は JIT（Just-In-Time）コンパイル と AOT（Ahead-Of-Time）コンパイル の両方に対応しており、開発時には JIT により Hot Reload が実現され、リリース時には AOT により高速なネイティブコードが生成されます。

以下は、Dart の基本的な構文例です。

dart// Dart の基本構文例

// 変数の宣言（型推論）
var name = 'Flutter';
int year = 2025;
double version = 3.27;

// 関数の定義
String greet(String name) {
  return 'Hello, $name!';
}

この例では、Dart の型推論により var を使って変数を宣言しています。また、文字列内に変数を埋め込む際は $変数名 を使用します。

dart// クラスの定義
class User {
  String name;
  int age;

  // コンストラクタ
  User(this.name, this.age);

  // メソッド
  void introduce() {
    print('私の名前は$name、$age歳です。');
  }
}

// クラスのインスタンス化
var user = User('太郎', 25);
user.introduce();

Dart はクラスベースのオブジェクト指向言語であり、コンストラクタの記述も簡潔です。this.name のように引数をそのままフィールドに代入する構文が使えます。

Flutter の UI はすべて Widget で構成されています。Widget は、テキスト、ボタン、レイアウトなど、あらゆる UI 要素を表現する部品です。

Widget はツリー構造で組み立てられ、親 Widget が子 Widget を含む形で階層化されます。この構造により、UI の再利用性が高まり、複雑な画面も組み立てやすくなります。

以下は、基本的な Widget ツリーの例です。

dart// Flutter の基本的な Widget ツリー例

import 'package:flutter/material.dart';

// アプリのエントリーポイント
void main() {
  runApp(MyApp());
}

Flutter アプリは main() 関数から始まり、runApp() でルート Widget を指定します。ここでは MyApp という Widget をルートとしています。

dart// ルート Widget の定義
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

MyApp は StatelessWidget を継承しており、状態を持たない Widget です。build() メソッドで UI を構築し、MaterialApp を返しています。

dart// ホーム画面の Widget
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter とは'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Scaffold は Material Design のレイアウト構造を提供する Widget で、appBar と body を持ちます。Center は子 Widget を中央に配置します。

以下の図は、Widget ツリーの構造をわかりやすく示したものです。

mermaidflowchart TB
  myapp["MyApp<br/>(MaterialApp)"]
  homepage["MyHomePage<br/>(Scaffold)"]
  appbar["AppBar"]
  body["Body (Center)"]
  text["Text Widget"]

  myapp --> homepage
  homepage --> appbar
  homepage --> body
  body --> text

この図から、Widget が階層的に構成され、親から子へとツリー状に配置されていることがわかります。

StatelessWidget と StatefulWidget

Flutter の Widget には、StatelessWidget と StatefulWidget の 2 種類があります。

StatelessWidget は状態を持たず、一度構築されたら変化しない Widget です。表示内容が固定されている場合に使用します。

一方、StatefulWidget は状態を持ち、ユーザーの操作やデータの変化に応じて UI を更新できます。カウンターやフォーム入力など、動的な UI には StatefulWidget を使用します。

以下は、StatefulWidget の実装例です。

dart// StatefulWidget の例：カウンターアプリ

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

StatefulWidget は createState() メソッドで State オブジェクトを生成します。このオブジェクトが状態を保持します。

dart// State クラスの定義
class _CounterPageState extends State<CounterPage> {
  int _counter = 0; // 状態として保持するカウンター

  // カウンターを増やすメソッド
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('カウンターアプリ'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('ボタンが押された回数:'),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 48),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

setState() を呼び出すことで、Flutter に状態が変化したことを通知し、UI が再構築されます。これにより、カウンターの値が画面に反映されます。

描画エンジン Skia の役割

Flutter が他のクロスプラットフォームフレームワークと大きく異なる点が、Skia という独自の描画エンジンを使用していることです。

Skia は Google Chrome や Android でも使用されている 2D グラフィックスライブラリで、高速で滑らかな描画を実現します。Flutter は Skia を介して直接ピクセルを描画するため、プラットフォーム固有の UI コンポーネントに依存しません。

この仕組みにより、iOS と Android で完全に同じ見た目の UI を実現でき、プラットフォーム間の差異を気にする必要がありません。また、60fps や 120fps といった高フレームレートでの描画も可能になります。

以下の図は、Flutter の描画フローを示したものです。

mermaidsequenceDiagram
  participant user as 開発者
  participant framework as Flutter Framework
  participant engine as Skia Engine
  participant platform as プラットフォーム

  user->>framework: Widget ツリー構築
  framework->>framework: レイアウト計算
  framework->>framework: ペイント処理
  framework->>engine: 描画コマンド送信
  engine->>platform: ピクセル描画
  platform->>user: 画面表示

開発者が Widget を定義すると、Flutter Framework がレイアウトとペイント処理を行い、Skia Engine が実際の描画を担当します。

Flutter の強み

クロスプラットフォーム対応

Flutter の最大の強みは、単一のコードベースで複数のプラットフォームに対応できる点です。iOS、Android、Web、Windows、macOS、Linux と、6 つのプラットフォームすべてに対応しています。

従来は、iOS は Swift、Android は Kotlin と、プラットフォームごとに異なる言語と開発環境が必要でした。しかし Flutter を使えば、Dart 言語だけで全プラットフォームに対応できるため、開発コストや保守コストを大幅に削減できます。

また、プラットフォームごとに UI が異なることによる品質のばらつきも防げます。同じコードから生成されるため、すべてのプラットフォームで一貫した体験を提供できるのです。

高いパフォーマンス

Flutter は、ネイティブアプリに近いパフォーマンスを実現しています。その理由は、Dart 言語が AOT コンパイルによりネイティブコードに変換されること、そして Skia エンジンが直接描画を行うことにあります。

他のクロスプラットフォームフレームワーク（React Native など）は、JavaScript ブリッジを介してネイティブコンポーネントを呼び出すため、どうしてもオーバーヘッドが発生します。一方、Flutter はブリッジを介さず直接描画するため、高速な動作が可能です。

実際、60fps での滑らかなアニメーションや、複雑な UI でも快適に動作することが報告されています。

豊富な UI コンポーネント

Flutter は、Material Design と Cupertino（iOS スタイル） の両方の UI コンポーネントを標準で提供しています。これにより、Android らしいデザインと iOS らしいデザインの両方を簡単に実装できます。

また、Widget のカスタマイズ性が非常に高く、独自のデザインシステムを構築することも可能です。ボタン、リスト、ダイアログ、フォームなど、あらゆる UI 部品が揃っているため、ゼロから作る必要がありません。

以下は、Material Design の基本的な Widget 例です。

dart// Material Design の基本 Widget 例

import 'package:flutter/material.dart';

class MaterialWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Design の例'),
      ),
      body: ListView(
        children: [
          // リストタイル
          ListTile(
            leading: Icon(Icons.home),
            title: Text('ホーム'),
            subtitle: Text('ホーム画面に移動します'),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              print('ホームをタップしました');
            },
          ),
          Divider(),
          // ボタン類
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Elevated Button'),
                ),
                SizedBox(height: 8),
                OutlinedButton(
                  onPressed: () {},
                  child: Text('Outlined Button'),
                ),
                SizedBox(height: 8),
                TextButton(
                  onPressed: () {},
                  child: Text('Text Button'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

この例では、ListTile でリスト項目を、ElevatedButton、OutlinedButton、TextButton で各種ボタンを表示しています。Material Design の標準的な UI パターンが簡単に実装できます。

Hot Reload による高速開発

Flutter の Hot Reload 機能は、開発効率を飛躍的に向上させます。コードを変更して保存すると、アプリを再起動することなく、数秒以内に変更が反映されます。

従来のネイティブ開発では、UI を修正するたびにアプリをビルドし直す必要があり、数分かかることも珍しくありませんでした。Flutter なら、UI の微調整を繰り返しながらリアルタイムで確認できるため、デザインの試行錯誤がスムーズになります。

Hot Reload により、開発時間が大幅に短縮され、より多くの時間を機能開発やテストに充てられます。

活発なコミュニティとエコシステム

Flutter は Google が積極的に開発を進めているオープンソースプロジェクトであり、世界中に活発なコミュニティが存在します。GitHub でのスター数も非常に多く、多くの企業や個人開発者が採用しています。

また、pub.dev という公式パッケージリポジトリには、数万ものパッケージが公開されています。状態管理、HTTP 通信、データベース、認証、地図表示など、あらゆる機能がパッケージとして提供されており、車輪の再発明をする必要がありません。

公式ドキュメントも充実しており、日本語の情報も増えてきているため、初心者でも学習しやすい環境が整っています。

以下は、Flutter のエコシステムを示した図です。

mermaidflowchart LR
  flutter["Flutter Framework"]
  pubdev["pub.dev<br/>(パッケージリポジトリ)"]
  community["開発者コミュニティ"]
  plugins["プラグイン<br/>(Firebase, Google Maps など)"]
  tools["開発ツール<br/>(VS Code, Android Studio)"]

  flutter --> pubdev
  flutter --> community
  flutter --> plugins
  flutter --> tools

  pubdev --> community
  plugins --> community

Flutter の周辺には、パッケージ、プラグイン、開発ツール、コミュニティが充実しており、開発を強力にサポートしています。

Flutter と他フレームワークの比較

React Native との違い

Flutter と比較されることが多いのが、Meta（旧 Facebook）が開発した React Native です。両者ともクロスプラットフォーム開発フレームワークですが、アーキテクチャが大きく異なります。

以下の表は、Flutter と React Native の主な違いをまとめたものです。

#	項目	Flutter	React Native
1	言語	Dart	JavaScript / TypeScript
2	描画方式	Skia エンジンによる独自描画	ネイティブコンポーネント呼び出し
3	パフォーマンス	高速（ブリッジなし）	中速（JavaScript ブリッジ経由）
4	UI の一貫性	全プラットフォームで同一	プラットフォームごとに異なる場合がある
5	Hot Reload	対応	対応（Fast Refresh）
6	学習曲線	Dart の習得が必要	JavaScript/React の知識が活かせる

React Native は JavaScript を使うため、Web 開発者には馴染みやすい一方、ネイティブコンポーネントを呼び出すため、プラットフォームごとの挙動の違いに悩まされることがあります。

Flutter は Dart という新しい言語を学ぶ必要がありますが、すべてのプラットフォームで一貫した挙動を保証でき、パフォーマンスも高いのが特徴です。

Kotlin Multiplatform との違い

JetBrains が開発している Kotlin Multiplatform（KMP） も、クロスプラットフォーム開発を可能にする技術です。ただし、KMP は UI を共有するのではなく、ビジネスロジックのみを共有するアプローチを取ります。

以下の表で、Flutter と Kotlin Multiplatform の違いを比較します。

#	項目	Flutter	Kotlin Multiplatform
1	UI の共有	可能（すべて共有）	不可（プラットフォームごとに実装）
2	ロジックの共有	可能	可能
3	言語	Dart	Kotlin
4	学習コスト	中程度	Kotlin の知識が必要
5	開発効率	高い（UI も共有できる）	中程度（UI は別途実装）

Kotlin Multiplatform は、ネイティブの UI をそれぞれのプラットフォームで実装するため、よりネイティブに近い体験を提供できますが、UI の開発コストは 2 倍になります。

Flutter は UI もロジックもすべて共有できるため、開発効率を最大化したい場合に適しています。

ネイティブ開発（Swift/Kotlin）との違い

最後に、ネイティブ開発との違いを確認しましょう。iOS なら Swift、Android なら Kotlin を使った開発が「ネイティブ開発」です。

以下の表で比較します。

#	項目	Flutter	ネイティブ開発
1	開発コスト	低い（1 つのコードで複数対応）	高い（プラットフォームごと）
2	パフォーマンス	高い（ほぼネイティブと同等）	最高（最適化可能）
3	プラットフォーム固有機能へのアクセス	プラグイン経由（一部は自作が必要）	完全にアクセス可能
4	開発チーム	1 チームで対応可能	iOS/Android 別チームが必要
5	UI の一貫性	高い	プラットフォームごとに異なる

ネイティブ開発は、プラットフォームのすべての機能に完全アクセスでき、最高のパフォーマンスを実現できます。一方、開発コストと人的リソースが多く必要です。

Flutter は、開発コストを抑えながらも高いパフォーマンスを実現できるため、スタートアップや中小規模のプロダクトに最適でしょう。

Flutter が向いているプロダクト

MVP 開発・スタートアップ

Flutter は、MVP（Minimum Viable Product）開発やスタートアップに非常に適しています。

スタートアップでは、限られた時間と予算の中で、素早くプロダクトを市場に投入し、ユーザーからのフィードバックを得ることが重要です。Flutter を使えば、iOS と Android の両方に対応したアプリを短期間で開発でき、開発コストも大幅に削減できます。

また、Hot Reload により UI の試行錯誤が素早くできるため、ユーザー体験を磨き込む時間も確保しやすくなります。

実際、多くのスタートアップが Flutter を採用しており、短期間で高品質なアプリをリリースしています。

EC アプリ・メディアアプリ

EC（電子商取引）アプリやメディアアプリも、Flutter との相性が良いプロダクトです。

これらのアプリは、商品一覧、詳細画面、カート、決済など、標準的な UI パターンが中心であり、プラットフォーム固有の複雑な機能が求められることは少ないでしょう。Flutter の豊富な UI コンポーネントを活用すれば、美しく使いやすい画面を効率的に構築できます。

また、iOS と Android で統一されたデザインとユーザー体験を提供できるため、ブランドイメージの統一にも貢献します。

社内業務アプリ

企業の社内業務アプリやエンタープライズアプリにも、Flutter は適しています。

社内アプリは、一般消費者向けアプリと比べて、最先端のプラットフォーム機能や高度なパフォーマンスが求められることは少なく、むしろ開発スピードとコスト効率が重視されます。

Flutter なら、iOS、Android、Web、デスクトップのすべてに対応できるため、社員がどのデバイスを使っていても同じアプリを提供できます。特に、Web 版も同時に開発できる点は大きなメリットです。

カスタム UI が求められるアプリ

Flutter は、独自のデザインシステムやカスタム UI が必要なアプリにも向いています。

Skia エンジンによる自由度の高い描画が可能なため、標準的な UI コンポーネントでは実現できない、独創的なデザインやアニメーションを実装できます。

ゲーム UI、音楽アプリ、デザインツールなど、ビジュアル表現が重要なアプリでは、Flutter の強みが最大限に活かされるでしょう。

以下の図は、Flutter が向いているプロダクトの特徴をまとめたものです。

mermaidflowchart TD
  flutter["Flutter が向いているプロダクト"]
  mvp["MVP 開発<br/>(素早いリリース)"]
  ec["EC・メディアアプリ<br/>(標準 UI 中心)"]
  enterprise["社内業務アプリ<br/>(複数プラットフォーム対応)"]
  custom["カスタム UI アプリ<br/>(独自デザイン)"]

  flutter --> mvp
  flutter --> ec
  flutter --> enterprise
  flutter --> custom

Flutter が向いていないプロダクト

一方で、Flutter がすべてのプロダクトに最適というわけではありません。以下のような場合は、ネイティブ開発やその他の選択肢を検討する方が良いでしょう。

プラットフォーム固有機能を多用するアプリ

iOS や Android の最新機能や固有機能を積極的に活用するアプリでは、Flutter だけでは対応しきれない場合があります。

例えば、最新の AR 機能、Apple Watch や Android Wear との深い連携、バックグラウンド処理の高度な制御などが必要な場合、Flutter のプラグインでは対応していないか、自分でプラットフォームチャネルを実装する必要があります。

このような場合、ネイティブ開発の方が開発効率が良く、品質も高くなる可能性があります。

3D ゲームや高度なグラフィックスアプリ

3D ゲームやリアルタイムレンダリングが必要なアプリは、Flutter よりも Unity や Unreal Engine などのゲームエンジンが適しています。

Flutter は 2D の UI 構築には優れていますが、3D グラフィックスの描画には特化していません。Skia エンジンは 2D 描画に最適化されているため、3D の複雑な処理には向いていないのです。

カジュアルな 2D ゲームであれば Flutter でも十分に開発可能ですが、本格的な 3D ゲームを作るなら、専用のゲームエンジンを選ぶべきでしょう。

既存のネイティブアプリが大規模な場合

すでに大規模なネイティブアプリが存在し、それを Flutter に移行する場合、コストとリスクが大きくなります。

Flutter は新規開発には非常に適していますが、既存のネイティブコードを全面的に置き換えるのは困難です。段階的に Flutter を組み込むことは可能ですが、アーキテクチャの複雑化やメンテナンスコストの増加が懸念されます。

すでに安定して動作しているネイティブアプリがあるなら、無理に Flutter に移行するのではなく、新機能のみを Flutter で開発するといったハイブリッドなアプローチが現実的でしょう。

Flutter のプロジェクト構成

基本的なディレクトリ構造

Flutter プロジェクトを作成すると、以下のようなディレクトリ構造が生成されます。

bashmy_flutter_app/
├── android/          # Android 固有の設定ファイル
├── ios/              # iOS 固有の設定ファイル
├── lib/              # Dart のソースコードを配置
│   └── main.dart     # アプリのエントリーポイント
├── test/             # テストコード
├── pubspec.yaml      # パッケージ依存関係とメタ情報
├── pubspec.lock      # 依存パッケージのバージョン固定
└── README.md

最も重要なのは lib/ ディレクトリで、ここにアプリのすべてのコードを配置します。main.dart がエントリーポイントとなり、アプリが起動します。

pubspec.yaml は、パッケージの依存関係やアプリのメタ情報を管理するファイルです。新しいパッケージを追加する際は、このファイルを編集します。

pubspec.yaml の設定

pubspec.yaml は、Flutter プロジェクトの設定ファイルです。依存パッケージ、アセット（画像やフォントなど）、アプリのメタ情報を定義します。

以下は、基本的な pubspec.yaml の例です。

yaml# pubspec.yaml の基本構成

name: my_flutter_app
description: Flutter のサンプルアプリケーション
version: 1.0.0+1

name はパッケージ名、description はアプリの説明、version はバージョン番号を表します。

yaml# 環境設定
environment:
  sdk: '>=3.0.0 <4.0.0'

# 依存パッケージ
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  http: ^1.1.0
  provider: ^6.1.0

environment では、使用する Dart SDK のバージョンを指定します。dependencies には、アプリが依存するパッケージを記述します。

yaml# 開発用パッケージ
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

# アセットの設定
flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/icons/
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf
        - asset: fonts/Roboto-Bold.ttf
          weight: 700

dev_dependencies には、開発時のみ必要なパッケージを記述します。flutter セクションでは、画像やフォントなどのアセットを指定します。

パッケージの追加方法

Flutter でパッケージを追加するには、pubspec.yaml に依存パッケージを記述し、以下のコマンドを実行します。

bash# パッケージのインストール
yarn add flutter pub get

このコマンドで、pubspec.yaml に記述されたパッケージがダウンロードされ、プロジェクトで利用可能になります。

例えば、HTTP 通信を行うために http パッケージを追加する場合は、以下のように pubspec.yaml を編集します。

yamldependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

その後、コマンドを実行すれば、http パッケージがインストールされます。

以下は、インストールした http パッケージを使った API 呼び出しの例です。

dart// HTTP パッケージを使った API 呼び出し例

import 'package:http/http.dart' as http;
import 'dart:convert';

// ユーザー情報を取得する関数
Future<Map<String, dynamic>> fetchUser(int userId) async {
  final url = Uri.parse('https://api.example.com/users/$userId');

  // GET リクエストを送信
  final response = await http.get(url);

  // レスポンスのステータスコードを確認
  if (response.statusCode == 200) {
    // JSON をパース
    return json.decode(response.body);
  } else {
    // エラーハンドリング
    throw Exception('Failed to load user: ${response.statusCode}');
  }
}

この例では、http.get() で API にリクエストを送り、レスポンスを JSON としてパースしています。非同期処理には async と await を使用します。

Flutter の開発環境構築

必要なツールのインストール

Flutter の開発を始めるには、以下のツールをインストールする必要があります。

Flutter SDK: Flutter の本体
Dart SDK: Flutter に含まれています
エディタ: VS Code または Android Studio
Xcode（macOS のみ）: iOS アプリのビルドに必要
Android Studio: Android アプリのビルドに必要

以下は、macOS での Flutter SDK のインストール手順です。

bash# Homebrew を使った Flutter のインストール
brew install --cask flutter

インストールが完了したら、以下のコマンドで環境を確認します。

bash# Flutter の環境診断
flutter doctor

このコマンドは、必要なツールが正しくインストールされているかをチェックし、不足しているものがあれば教えてくれます。

エディタの設定（VS Code）

VS Code で Flutter 開発を行う場合は、公式の Flutter 拡張機能をインストールします。

VS Code を起動
拡張機能タブ（Cmd+Shift+X）を開く
「Flutter」で検索
「Flutter」拡張機能をインストール

この拡張機能には、Dart 言語サポート、Hot Reload、デバッグ機能などが含まれています。

プロジェクトの作成と実行

以下のコマンドで、新しい Flutter プロジェクトを作成します。

bash# 新規プロジェクトの作成
flutter create my_first_app

プロジェクトディレクトリに移動し、アプリを実行します。

bash# プロジェクトディレクトリに移動
cd my_first_app

# アプリの実行（接続されているデバイスまたはエミュレータで起動）
flutter run

このコマンドで、アプリがビルドされ、接続されているデバイスやエミュレータで起動します。

Flutter の状態管理

setState による状態管理

Flutter で最もシンプルな状態管理は、setState() を使う方法です。StatefulWidget 内で状態を更新する際に使用します。

以下は、先ほどのカウンターアプリの例です。

dart// setState を使った状態管理の例

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // 状態を更新
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text('$_counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

シンプルなアプリでは setState で十分ですが、アプリが複雑になると管理が難しくなります。

Provider による状態管理

アプリが大規模になると、Provider パッケージを使った状態管理が推奨されます。Provider は、Flutter 公式が推奨する状態管理パッケージで、シンプルかつ強力です。

まず、pubspec.yaml に Provider を追加します。

yamldependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.0

次に、状態を管理するクラスを作成します。

dart// Provider を使った状態管理の例

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// 状態を管理するクラス
class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // 状態変更を通知
  }
}

ChangeNotifier を継承し、notifyListeners() を呼ぶことで、状態の変更をリスナーに通知します。

dart// Provider を使った UI の実装

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Counter'),
      ),
      body: Center(
        child: Consumer<CounterModel>(
          builder: (context, counter, child) {
            return Text(
              '${counter.counter}',
              style: TextStyle(fontSize: 48),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterModel>().increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Consumer で状態を購読し、context.read() で状態を更新します。Provider を使うと、複数の画面で状態を共有しやすくなります。

その他の状態管理手法

Flutter には、Provider 以外にも多様な状態管理手法があります。

Riverpod: Provider の改良版で、より安全で柔軟
Bloc: ビジネスロジックと UI を分離する設計パターン
GetX: ルーティングや依存性注入も含むオールインワンパッケージ
MobX: リアクティブプログラミングを採用

プロジェクトの規模や要件に応じて、適切な状態管理手法を選択することが重要です。

Flutter の代表的なパッケージ

通信系パッケージ

Flutter で HTTP 通信を行うための代表的なパッケージは以下です。

http: シンプルな HTTP クライアント
dio: リッチな機能を持つ HTTP クライアント（インターセプター、キャンセル、ファイルアップロードなど）

dart// dio パッケージの使用例

import 'package:dio/dio.dart';

// Dio インスタンスの作成
final dio = Dio();

// GET リクエスト
Future<void> fetchData() async {
  try {
    final response = await dio.get('https://api.example.com/data');
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

// POST リクエスト
Future<void> postData() async {
  try {
    final response = await dio.post(
      'https://api.example.com/users',
      data: {'name': 'Taro', 'age': 25},
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

UI 系パッケージ

UI を拡張するためのパッケージも豊富です。

flutter_svg: SVG 画像を表示
cached_network_image: ネットワーク画像をキャッシュ付きで表示
shimmer: ローディング時のシマーエフェクト
flutter_staggered_grid_view: 不規則なグリッドレイアウト

dart// cached_network_image の使用例

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

データベース系パッケージ

ローカルデータベースを扱うパッケージも多数あります。

sqflite: SQLite データベース
hive: 高速な NoSQL データベース
shared_preferences: キーバリュー型の簡易ストレージ

dart// shared_preferences の使用例

import 'package:shared_preferences/shared_preferences.dart';

// データの保存
Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', 'Taro');
  await prefs.setInt('age', 25);
}

// データの読み込み
Future<void> loadData() async {
  final prefs = await SharedPreferences.getInstance();
  final username = prefs.getString('username') ?? 'Unknown';
  final age = prefs.getInt('age') ?? 0;
  print('Username: $username, Age: $age');
}

認証・Firebase 系パッケージ

Firebase との連携も簡単に行えます。

firebase_core: Firebase の初期化
firebase_auth: 認証機能
cloud_firestore: Firestore データベース
firebase_storage: ストレージ

以下は、Firebase Authentication を使った簡単なログイン例です。

dart// Firebase Authentication の使用例

import 'package:firebase_auth/firebase_auth.dart';

// メールアドレスとパスワードでログイン
Future<UserCredential?> signIn(String email, String password) async {
  try {
    final userCredential = await FirebaseAuth.instance
        .signInWithEmailAndPassword(email: email, password: password);
    print('ログイン成功: ${userCredential.user?.email}');
    return userCredential;
  } on FirebaseAuthException catch (e) {
    if (e.code == 'user-not-found') {
      print('Error: ユーザーが見つかりません');
    } else if (e.code == 'wrong-password') {
      print('Error: パスワードが間違っています');
    }
    return null;
  }
}

// ログアウト
Future<void> signOut() async {
  await FirebaseAuth.instance.signOut();
  print('ログアウトしました');
}