Chapter 05

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

tokku5552
tokku5552
2022.11.19に更新

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

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

https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc

  • MacでのFlutter環境構築動画

https://www.youtube.com/watch?v=kpvVENfDCRc

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

https://www.youtube.com/watch?v=I6TpDuSFbTc

  • Windows10でのFlutter環境構築動画

https://www.youtube.com/watch?v=6J-KK1Ft9NY

  • Flutter公式ドキュメント

https://docs.flutter.dev/get-started/install

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

システム要件

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

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

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

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

https://docs.flutter.dev/get-started/install/macos#get-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が通っていないので、ターミナルを開き直したりしてもう一度実行してください。

https://docs.flutter.dev/get-started/install/macos#update-your-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

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