FlutterはGoogleが開発したフレームワークで、同社独自のDart言語を基盤にしています。単一のコードベースだけでWeb、iOS、Android、Linux、Windows、さらに組み込み機器向けアプリを作成可能です。類似したクロスプラットフォーム開発ツールとしては、MicrosoftのMAUIやPHP開発者向けのNativePHPなどが挙げられます。
何より魅力的な点として、Flutterは完全なオープンソースであることが挙げられます。共通のコードからネイティブに近い滑らかなマルチプラットフォームアプリをコンパイルする仕組みになっており、現在多くの開発者がAndroidモバイルアプリ開発に活用しています。
Flutterはネイティブな機械語に直接コンパイルされるため、作成したアプリのリバースエンジニアリングが難しい特長があります。最適化されたARM・Intel向けバイナリやJavaScriptを出力し、対象とするあらゆるデバイスで高速な動作を実現します。
モバイル、Web、デスクトップ、組み込みアプリの開発に完全対応しています。
Googleの各種ネイティブサービスがシームレスに連携
Googleのアプリ開発エコシステムをフル活用できます。Firebase、Google広告、Google Play、Google Pay、Googleウォレット、Googleマップなどとスムーズに連携するため、開発工程を効率化し、幅広いユーザーにアプリを届けられます。
Flutterの実行基盤はDart言語で、全プラットフォームで高速なアプリ開発ができるよう最適化されています。
Flutter公式サイトはこちら：Flutter – あらゆる画面向けアプリを作成
環境構築とインストール
Flutterは複数のOSに対応しており、下記に記載されているOSはすべて追加設定なしでFlutter開発環境を構築できます。
本講座ではWindows環境のセットアップ手順を解説します。
Flutter開発環境を構築する前に、事前に必要なツールをいくつかインストールしておく必要があります。
- Windows用Gitのインストール
Git公式サイトからインストーラーをダウンロードします：Git – Windows向けインストール
筆者はIntel 64bit版Windowsを使用しているため、以下のインストーラーをダウンロードしました：Windows 64bit版Gitセットアップ。
Gitのインストールは一般的なWindowsソフトと同じく非常に簡単で、基本的にすべての画面で「次へ」をクリックするだけで完了します。
- Visual Studio Codeのダウンロードとインストール
FlutterはVS CodeとAndroid Studioの両方に対応しているため、使い慣れたエディターを選んで構いません。本講座ではAndroid Studioをメインツールとして使用するため、Android Studio公式ページから最新版をダウンロードしてください：https://developer.android.com/studio
Flutter本体のインストール
ここまでは補助的な事前ツールのセットアップだったため、次にFlutterフレームワーク本体をインストールします。プロジェクトを作成するにはローカルにFlutterを導入する必要があります。VS Codeで開発する場合は、VS Code内からFlutterを直接導入する手順を記載した別のガイドを参照してください。VS Code内でFlutterを一括設定可能です。
VS CodeにDartとFlutterを追加する手順は、他の拡張機能と同じです。拡張機能マーケットプレース画面でFlutterとDartを検索するだけで導入できます。
VS CodeにDart・Flutter拡張機能を追加するには、以下のマーケットプレースページを開き、Installボタンをクリックします。ブラウザからVS Codeを起動する許可を求められたら許可してください。公式の手順書はこちら：数分でFlutterを始める
ただし本講座ではVS Codeを使用しないため、手動でFlutterをインストールする方法を解説します。
Flutter手動インストール手順
今回の手動セットアップはGoogle公式ドキュメントに準拠しています：https://docs.flutter.dev/install/manual
上記リンクを開き、自身のOSに対応したインストーラーを選択します。本記事ではWindowsを選択します。
ダウンロードボタンをクリックし、Flutterのアーカイブファイルを取得します。
ダウンロード完了後、フォルダ名にスペースや特殊記号を含まないパスにアーカイブを展開します。シンプルな例としてC:\flutterを推奨します。
展開後のフォルダ内は下記のような構成になります。
binフォルダの完全パス C:\flutter\bin をコピーし、システムのPATH環境変数に追加します。
Windowsのスタートメニューを開き、「環境変数の編集」と検索します。
PATH変数のリストに、先ほどのbinフォルダパスを追加します。
Dart SDKをインストールする
Flutterのセットアップが完了したら、Dart SDKが必要になります。ターミナルを開き、以下のコマンドを実行します。
flutter doctorこのコマンドを実行すると、自動的にDart SDKがダウンロードされます。
C:\Users\Jack>flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...Code language: JavaScript (javascript)ここまでのインストールが正常に完了したか確認するため、通常のCMDプロンプトを開き、再度同じコマンドを実行します。
補足：ネットワーク制限の影響で一部地域ではインストールに失敗する場合があります。その場合はCMDまたはPowerShellに下記のミラープロキシ環境変数を1行ずつ実行してから再度処理を試してください。
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctorCode language: JavaScript (javascript)
最後に実行する flutter doctor はFlutter開発環境全体をスキャンする診断ツールです。環境の不足しているコンポーネントや設定不備を検出してくれます。
筆者の環境で実行した際の診断結果は下記の通りです。
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [ 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT LTSC 64-bit, 21H2, 2009)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/to/windows-android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (2 available)
[!] Network resources
X An HTTP error occurred while checking "https://github.com/": request timed out
! Doctor found issues in 3 categories.Code language: JavaScript (javascript)「X」マークが付いた行は必須コンポーネントが欠けている、または設定に不備があることを意味します。例えばAndroid SDKが無いとAndroid向けアプリをビルドできず、Chromeがインストールされていない場合はWeb版Flutterプロジェクトのデバッグが行えません。Android SDKの問題は次の項目で解消します。Chromeが必要な場合は別途インストールしてください。Windowsデスクトップアプリのみ開発する場合は、これら2つの導入を省略可能です。
Android SDK未検出（Android向けビルドのコンパイル不可）
Chromeが検出されない（Webデバッグ機能が使用不可）
Chrome公式ダウンロードリンク：Google Chrome – Google製高速で安全なブラウザをダウンロード
Android Studioをインストールする
筆者は最新版Windowsインストーラー「android-studio-quail1-patch1-windows.exe」をダウンロードしました。ファイルをダブルクリックするだけでセットアップが起動します。
こちらもインストール画面では「次へ」を連続でクリックするだけで完了します。
インストール完了後Android Studioを起動し、初期セットアップウィザードで引き続き「次へ」を選択します。
すべてのコンポーネントのインストールが終わると、Android Studio内で新規Flutterプロジェクトを作成できるようになります。
CMDを再起動し、再度flutter doctorを実行して環境を再スキャンします。
[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
X cmdline-tools component is missing.
Try installing or updating Android Studio.
Alternatively, download the tools from https://developer.android.com/studio#command-line-tools-only and make sure
to set the ANDROID_HOME environment variable.
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/windows-android-setup for more details.Code language: PHP (php)Android Studio内で ファイル → 設定 → 外観・動作 → システム設定 → Android SDK を開きます。
SDK Toolsタブに切り替え、下記項目にチェックを入れます。
Android SDK Command-line Tools (latest)
引き続きSDK Toolsタブを開き、以下のツールを選択します。
Android SDK Command-line Tools (latest)
Applyをクリックし、ツールの自動ダウンロードとインストールが完了するまで待機します。
ダウンロード完了後、もう一度flutter doctorを実行します。
[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licensesCode language: CSS (css)この警告が表示されるのは、Android SDKの利用規約に同意していないためです。
Android SDKライセンス未同意（Some Android licenses not accepted）
CMDに以下のコマンドを入力して実行します。
flutter doctor --android-licensesライセンス確認のプロンプトが表示されるたびに「Y」と入力してEnterキーを押してください。
最後にターミナルでflutter doctorを実行し、すべての環境が正常に整ったか確認します。
C:\Users\Jack>flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [Version 10.0.19044.7417], locale zh-CN)
[√] Windows Version (Windows 10 IoT Enterprise LTSC 64-bit, 21H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (3 available)
[√] Network resources
• No issues found!Code language: JavaScript (javascript)
これでFlutter開発環境の構築がすべて完了しました。次回の講座では、実際に初めてのFlutterサンプルプロジェクトを作成していきます。