【Flutter】初めての開発環境構築【iOS・Android】

FlutterFlutter

Flutterの開発環境構築

実際に行なったログベースでの構築手順です。macOSでの構築です。
結構ハマりながらの構築になるので、1本道では行けませんでした。

それではやっていきます。

1. ブラウザから Flutter を ダウンロードする

以下のサイトからFlutter本体をダウンロードします。

macOS install
How to install on macOS.

2. Flutter を展開し、利用できる状態にする

ここからはTerminal を用いて進めます。
ユーザールートディレクトリに移動してから作業を始めています。

development ディレクトリを作成するコマンドを実行。

mkdir development

ダウンロードしてきたFlutter ファイルを展開します。

unzip ~/Downloads/flutter_macos_2.0.2-stable.zip

Flutter にパスを通します。

export PATH="$PATH:~/development/flutter/bin"
source ~/.bash_profile

Flutter ツールのインストールを行います。

flutter parcache

ここまでで準備完了です。が、ここからが本番でした。

Flutter 周辺環境を構築

iOS開発環境とandroid 開発環境を取得する

iOSとAndroidの開発ツール を事前に取得しておきましょう。

xcodeの準備

xcode は app store からダウンロードしました。
結構容量は必要で、アプリ開発には30GBはいるらしいです。

android studio の準備

android studio は ブラウザでダウンロードしました。
このリンクからダウンロード。

Download Android Studio and SDK tools  |  Android Developers
Download the official Android IDE and developer tools to build apps for Android phones, tablets, wearables, TVs, and more.

flutter doctor で 確認する

周辺環境が準備できているかどうかをチェックするコマンドを実行します。

flutter doctor

実行すると、エラーがでました。
まだ利用できない状態のようなので、1つづつ解決します。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ 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/docs/get-started/install/macos#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.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

エラー対処方法

ここからは状況によって出る人もいれば、でない人もいると思うので適宜チェックしてみてください。

CocoaPods not installed.

iOS側の環境構築が整ってないときに出るエラーです。
こちらに対処方法をまとめました。

Unable to locate Android SDK.

android側の環境構築が整ってないときに出るエラーです。
こちらに対処方法をまとめました。

cmdline-tools component is missing

android側の環境構築が整ってないときに出るエラーです。
こちらに対処方法をまとめました。

Android license status unknown.

android側の環境構築が整ってないときに出るエラーです。
こちらに対処方法をまとめました。

最後に

flutter doctor を最後に実行し、全ての環境利用が可能になったら構築完了です。

コメント

タイトルとURLをコピーしました