Flutterとは?インストール〜開発環境構築までの手順!プロジェクト作成

この記事からわかること
- Flutterとは?
- インストール方法と開発環境構築までの手順
- iOS/Androidのシミュレーターでアプリを起動させる方法
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Xcode:16.0
- Flutter:3.29.2
- Dart:3.7.2
- Mac M1:Sonoma 14.6.1
Flutterとは?
FlutterとはiOS、Android、Webなどクロスプラットフォームで動作するアプリケーションを開発するためのフレームワークです。Googleが開発し、オープンソースなフレームワークになっています。
本来ならiOSならSwift、AndroidならKotlin、WebならPHPなどそれぞれ言語を習得する必要がありますが、Flutterでは「Dart(ダート)」と呼ばれる統一の言語を使用してそれぞれの環境で動作させることが可能です。
そのため開発コストを大幅に削減することができ、開発自体もビューを構築するためにウィジェットと呼ばれる単位で豊富に用意されているためデザインに富んだUI構築がスムーズに行うことができます。
iOS/AndroidのUI構築
Flutterでは「Widget」と呼ばれる単位でUI部品が定義されています。このWidgetは「Androidデザイン(Material)」と「iOSデザイン(Cupertino)」が簡単に実装できるようにパッケージ化されています。これによりAndroidぽいアプリやiOSぽいアプリの実装コストが大幅に削減することが可能になっています。
※ 「Cupertino(クパチーノ)」という名前は、Apple本社があるアメリカ・カリフォルニア州の都市から取られているようです。
デメリット
メリットが多く感じるFlutterですがデメリットも存在します。
ネイティブ機能を使いにくい
iOSやAndroidがそれぞれOSごとに持っている機能(カメラやBluetooth、位置情報など)を使用したい際にネイティブのコードを呼び出す必要がある場合があり、flutterとの統合が複雑になることがあります。
UIカスタマイズ
FlutterではGoogleが推奨するマテリアルデザインやAppleライクなCupertinoデザインを活用することが可能ですが、プロジェクトに依存するようなデザインやアニメーションの実装が複雑になることがあります。
インストールする方法
FlutterをMacで利用できるようにするにはFlutter SDKをインストールする必要があります。公式サイトからダウンロードできるので自分のMacのCPUにあった方をダウンロードします。

※CPUを確認するには上部メニューの「」>「このMacについて」>「プロセッサ」か「チップ」の項目が「Intel Core i5」または「Apple M1」であるか確認する
「flutter」フォルダの移動
ダウンロードできた「flutter_macos_arm64_3.13.5-stable.zip」を解凍すると「flutter」フォルダが生成されます。現時点ではダウンロードフォルダの中にあるかと思いますので[ユーザー]/development
ディレクトリを作成してその中で管理するようにしていきます。
// developmentディレクトリの作成
$ mkdir ../development
// flutterを../development/.へ移動
$ mv flutter ../development/.
パスを通す
flutter
コマンドが実行できるようにパスを通していきます。
$ vi ~/.zshrc
// viで開いた中に記述
export PATH=~/development/flutter/bin:$PATH
// 保存して閉じる
:wq
// 現在開いているターミナルに反映
$ source ~/.zshrc
これでインストール作業は完了です。正常にコマンドが実行できるか確かめてみます。
$ flutter --version
Flutter 3.13.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 12fccda598 (3 days ago) • 2023-09-19 13:56:11 -0700
Engine • revision bd986c5ed2
Tools • Dart 3.1.2 • DevTools 2.25.0
開発環境の構築方法
flutterで両OSのアプリを開発できるようにするためにはそれぞれのIDE(統合開発環境)やライブラリなどをインストール、セットアップする必要があります。
必要になるもの
- Xcode:Apple製アプリ用開発環境(IDE)
- Android Studio:Android製アプリ用開発環境(IDE)
- Cocoa Pods:Swiftライブラリ管理ツール
- VS Code:エディタ
- Chrome:ブラウザ
現時点で環境が整えられていないものはflutter doctor
コマンドを実行すると教えてくれます。チェックマークが全てついていれば環境が整っていますが、ビックリマークやバツマークがついている場合は環境が整えられていないので別途インストール、セットアップが必要です。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.5, on macOS 13.5.2 22G91 darwin-arm64, locale
ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.82.2)
[✓] Connected device (2 available)
[✓] Network resources
• No issues found!
Android toolchain
後述するAndroid Studioがインストール済みなのに「Android toolchain」でエラーが起きた場合は以下の記事を参考に解消してください。
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
「cmdline-tools component is missing」の解決法
おすすめ記事:【Mac/Flutter】cmdline-tools component is missingの解決方法!
「Android license status unknown」の解決法
おすすめ記事:【Mac/Flutter】Android license status unknownの解決方法!
Xcode:Apple製アプリ用開発環境(IDE)
「Xcode」はApple製のアプリ開発を行うための統合開発環境(IDE)です。アプリとして提供されているためApp Storeから簡単にインストールすることが可能です。容量が大きくインストールに時間もかかるので注意してください。

Android Studio:Android製アプリ用開発環境(IDE)
「Android Studio」はAndroid製のアプリ開発を行うための統合開発環境(IDE)です。公式サイトよりインストールすることが可能です。

Cocoa Pods:Swiftライブラリ管理ツール
「Cocoa Pods」はSwiftライブラリ管理ツールです。こちらはコマンドラインツールになるのでMacであればHomebrewなどを利用してインストールします。以下記事でHomebrewを使用したインストール方法を紹介しています。
VS Code:エディタ
「VS Code」はプログラミング言語を記述するエディターツールです。実際にFlutterで開発を進めていく際には「VS Code」を使用してコードを記述していきます。(「Android Studio」でもOK)

公式サイトよりインストールすることができるので詳細は以下の記事を参考にしてください。
インストールが完了したらFlutterで使えるようにセットアップしていきます。VS Codeを立ち上げて「Flutter」という拡張機能をインストールしておきます。これでVS Code上から実装の定義などを確認したりすることができるようになります。

プロジェクトの作成方法
ここまででFlutterの導入から開発環境の構築まで完了したので実際にプロジェクトを立ち上げてみます。作成したい階層に移動したらflutter create [アプリ名]
コマンドを実行します。
$ flutter create testapp
無事コマンドが成功したら、Flutterプロジェクトが作成されているので階層をプロジェクトルートに合わせます。
$ cd testapp
プロジェクトを起動させるにはflutter run
コマンドを実行します。実行するとプロジェクトを起動する環境を問われる(mac or Chrome)ので該当の番号を入力します。
$ flutter run
// 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
No wireless devices were found.
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (or "q" to quit):
例えば「macOS」で進めるために1
を入力後しばらくすると以下のようにデモプロジェクトが立ち上がります。

起動中にターミナルにコマンドを入力することで特定の操作を行うことが可能です。
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
終了したい場合はq
を入力すればプロジェクトを終了させることが可能です。
iOS/Androidのシミュレーターで確認する
先ほどはMacで動作させましたがiOS/Androidのシミュレーターで動作を確認する方法も紹介しておきます。iOS/Androidともに基本的な手順は同じです。
手順
- シミュレーター/エミュレーターを起動させる
- flutter devicesコマンドでデバイスIDを確認
- flutter run -d [デバイスID]コマンドでデバイスを指定して起動
iOSの場合
iOSの場合はopen -a Simulator
コマンドを実行して「Simulator」アプリを起動します。「Simulator」はXcodeをインストールしていれば一緒にインストールされるアプリです。
$ open -a Simulator
アプリが起動すればシミュレーターが立ち上がりますが任意の機種で確認したい場合は上部メニュー「File」>「Open Simulator」から登録してある機種を選択することが可能です。

Androidの場合
Androidの場合は./emulator -avd デバイス名
でエミュレーターを起動させることが可能です。以下の./emulator
コマンドが実行できるようにカレントディレクトリを先に移動しておきます。
$ cd /Users/{ユーザー名}/Library/Android/sdk
$ cd emulator
# 有効なデバイス名のリストを取得
$ ./emulator -list-avds
Galaxy_Nexus_API_34
Pixel_6_Pro_API_35
# エミュレーター起動
$ ./emulator -avd Pixel_6_Pro_API_35
アプリを起動させてみる
Flutterのアプリを起動させるためにflutter devices
コマンドでアクティブなデバイスのIDを取得します。見にくいですが1つ目の「•」の後にあるのがデバイスIDになります。以下の場合はAndroidならemulator-5554
、iOSならE22E3D37-4ACB-48F4-A27F-7FEE89A6DDE9
になります。
$ flutter devices
4 connected devices:
sdk gphone64 arm64 (mobile) • emulator-5554 •
android-arm64 • Android 14 (API 34) (emulator)
iPhone 16 Pro Max (mobile) • E22E3D37-4ACB-48F4-A27F-7FEE89A6DDE9 • ios
• com.apple.CoreSimulator.SimRuntime.iOS-18-0 (simulator)
macOS (desktop) • macos •
darwin-arm64 • macOS 14.6.1 23G93 darwin-arm64
Chrome (web) • chrome •
web-javascript • Google Chrome 134.0.6998.89
実際にアプリを対象のデバイスにビルドするにはflutter run -d [デバイスID]
コマンドを実行します。これで対象のデバイスにアプリがビルドされ起動します。
$ flutter run -d emulator-5554
or
flutter run -d E22E3D37-4ACB-48F4-A27F-7FEE89A6DDE9

ディレクトリ構成
flutter create
を実行すると生成されたディレクトリの中には非常に多くのファイルとディレクトリが自動で用意されます。これはWeb / iOS / Androidとクロスプラットフォームで動作させるために必要なファイルがそれぞれ存在するため数が多くなってしまっています。
まずはルートディレクトリに存在するファイルとディレクトリの役割を確認してみます。
Flutter アプリ
├── android
│ └── # Android 用のネイティブコードや設定
│
├── ios
│ └── # iOS 用のネイティブコードや設定
│
├── lib
│ └── # Flutter の主要なコードを格納
│
├── test # 単体テスト用
│ ├── widget_test.dart # サンプルのウィジェットテスト
│
├── web
│ └── # Flutter Web 用の設定
│
├── 他にも macos や linux、windows など
│
├── pubspec.yaml # パッケージ管理ファイル(依存関係やアセット管理)
├── pubspec.lock # 依存関係のバージョン管理
├── README.md # プロジェクトの説明
├── .gitignore # Git で管理しないファイルの指定
├── .metadata # Flutter プロジェクトのメタデータ
├── .packages # 依存関係リスト(非推奨)
├── .dart_tool # Dart のツール関連データ
├── .idea # IntelliJ / Android Studio の設定フォルダ
└── analysis_options.yaml # Dart のコード解析ルール設定
androidディレクトリ
Androidアプリを構成するために必要なファイルが用意されています。Androidアプリ開発経験がある型なら見覚えのあるファイルばかりかと思います。
├── android # Android 用のネイティブコードや設定
│ ├── app
│ │ ├── src
│ │ │ ├── main
│ │ │ │ ├── AndroidManifest.xml # Android アプリのメタデータ
│ │ │ │ ├── kotlin
│ │ │ │ │ └── com/example/my_app
│ │ │ │ │ └── MainActivity.kt # Flutter のエントリーポイント
│ │ │ │ ├── java (Java を使う場合)
│ │ │ │ └── res # Android のリソースフォルダ(アイコン、テーマなど)
│ │ ├── build.gradle # Android 用の Gradle 設定
│ │ ├── proguard-rules.pro # ProGuard 設定ファイル
│ ├── build.gradle # Android プロジェクトの Gradle 設定
│ └── gradle.properties # Gradle の設定ファイル
iosディレクトリ
iOSアプリを構成するために必要なファイルが用意されています。iOSアプリ開発経験がある型なら見覚えのあるファイルばかりかと思います。
├── ios # iOS 用のネイティブコードや設定
│ ├── Runner
│ │ ├── AppDelegate.swift # iOS アプリのエントリーポイント
│ │ ├── Info.plist # iOS アプリのメタデータ
│ │ ├── Assets.xcassets # 画像やアイコンを管理
│ └── Runner.xcodeproj # Xcode のプロジェクトファイル
webディレクトリ
├── web # Flutter Web 用の設定
│ ├── index.html # Web アプリのエントリーポイント
│ ├── manifest.json # Web アプリのメタデータ
│ ├── favicon.png # Web アプリのアイコン
libディレクトリ
lib
ディレクトリはFlutterアプリのUIやロジックを実装するメインディレクトリです。最初はアプリのエントリーポイント(最初に実行されるポイント)となるmain.dart
しか存在しません。この中にViewやModelファイルを追加していきます。Flutterでは命名規則としてスネークケース(snake_case)が推奨されています。
├── lib # Flutter の主要なコードを格納
│ └── main.dart # アプリのエントリーポイント
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 デモ',
theme: ThemeData(
// アプリのテーマを設定
//
// 試してみよう: "flutter run" でアプリを実行後、
// colorScheme の seedColor を Colors.green に変更して
// ホットリロードすると、アプリのテーマ色が変わる。
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
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(() {
// setState を呼び出すことで、Flutter に状態の変化を通知し、
// UI の再描画をトリガーする。
_counter++;
});
}
@override
Widget build(BuildContext context) {
// setState が呼び出されるたびに、このメソッドが再実行される。
// Flutter はパフォーマンスを最適化しており、変更が必要な部分だけを再描画する。
return Scaffold(
appBar: AppBar(
// 試してみよう: Colors.amber などに変更して、
// ホットリロードをすると AppBar の色が変わる。
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
// Center ウィジェットは子ウィジェットを中央に配置する。
child: Column(
// Column ウィジェットは子ウィジェットを縦に並べる。
// mainAxisAlignment を指定することで、
// 縦方向の配置を調整できる。
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'ボタンを押した回数:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'インクリメント',
child: const Icon(Icons.add),
), // 末尾のカンマは、コードの自動フォーマットを適用しやすくするため。
);
}
}
実際のエントリーポイントはmain
メソッドです。この中にrunApp
メソッドが呼び出されており、引数にルートWidgetを指定します。
void main() {
runApp(const MyApp());
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。