Chapter 05

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

tokku5552

2022.11.19に更新

このチャプターの目次

システム要件
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

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