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());
}まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
