Chapter 05

【事前準備】Flutterの開発環境構築

tokku5552

2023.06.29に更新

このチャプターの目次

システム要件
Flutter SDK のダウンロード&インストール
各プラットフォームのセットアップ

まずは Flutter の開発環境を整える必要があります。
Flutter 大学から zenn の記事や YouTube の動画で環境構築の詳しい解説がなされていますので、そちらを参考にしてください。

Flutter 基礎入門 by Flutter 大学->Flutter の環境構築(Mac 編) - zenn

Mac での Flutter 環境構築動画

M1 Mac の方向けの Flutter 環境構築動画

Windows10 での Flutter 環境構築動画

Flutter 公式ドキュメント

以下では Mac OS(Intel)の場合の手順を載せておきます。

システム要件

以下の条件を満たしている必要があります。

OS
- macOS
ディスクの空き容量
- 2.8 GB 以上
必要なツール
- git

Flutter SDK のダウンロード&インストール

以下の URL から最新の安定版 Flutter SDK をダウンロードします。

ホームディレクトリに development フォルダを作成して zip ファイルを解凍する。(以下のコマンドは 2022/11/17 時点での最新版 3.3.8 の場合)

cd ~
ls -l development

# developmentフォルダが存在しない場合
mkdir ~/development

unzip ~/Downloads/flutter_macos_3.3.8-stable.zip

flutter/bin へ PATH を通す

# zshの場合
echo "export PATH="\$PATH:`pwd`/flutter/bin"" >> ~/.zshrc
source ~/.zshrc

# bashの場合
echo "export PATH="\$PATH:`pwd`/flutter/bin"" >> ~/.bash_profile
source ~/.bash_profile

flutter doctor を実行する

flutter doctor

この時点でzsh: command not found: flutterなどと表示されたらうまく PATH が通っていないので、ターミナルを開き直したりしてもう一度実行してください。

以下のような表示がされれば OK です

表示例
...
[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.

...

各プラットフォームのセットアップ

今回開発するのは Flutter web なので、iOS/Android は不要と感じるかもしれませんが、公式のインストール手順では、Flutter SDK のあと iOS/Android のセットアップを行うことを前提にして web のセッティングを行っているので、本記事でもそれに習います。ただ、この記事では iOS/Android ともにシミュレーターやエミュレーターでの動作確認は記載しないため、それらでの開発を行いたい場合は、公式ドキュメントや冒頭の参考リンクを参照してください。
※iOS/Android のセットアップを行わなくても web が動作する可能性はありますが、動作する保証がないので、公式の手順に従いセットアップしておくことをおすすめします。

iOS セットアップ

Xcode をインストールします。
- Mac App Storeを開き、Xcode をインストールします。
- ここがすごく時間がかかるので、事前に実施しておくことをおすすめします。
Xcode のインストールが完了したら、ターミナルで以下のコマンドを実行します

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Android のセットアップ

以下の URL から Android Studio をダウンロードしてウィザードに従ってインストールします。

https://developer.android.com/studio

インストールが完了したら再びflutter doctorを実行し、Flutter が Android Studio を見つけれていることを確認します。

flutter doctorの実行例
% flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.1, on macOS 12.6 21G115 darwin-x64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)

...

[✓] Android Studio (version 2021.1)
[✓] Android Studio
...

Web のセットアップ

flutter devicesを実行しデバイスの確認をします。
- ここで以下のように chrome が表示されていなければGoogle Chromeをインストールします。

% flutter devices
3 connected devices:

iPhone 14 Pro Max (mobile) • 05DEB18B-DBA0-4333-B4F0-C079BD7FAA77 • ios            •
com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
macOS (desktop)            • macos                                • darwin-x64     • macOS 12.6 21G115 darwin-x64
Chrome (web)               • chrome                               • web-javascript • Google Chrome 107.0.5304.110

動作確認用のプロジェクトを作成します

cd ~
flutter create my_app
cd my_app

web でデバッグ実行を行います

flutter run -d chrome

以下のような画面が表示されれば、環境構築は完了です 🎉