【Flutter】macOSはFVMを利用してFlutter開発環境をゼロから構築する

序文

この記事は、macOS システム上で fvm を使用して Flutter 開発環境をゼロから構築し、プロジェクトを実行するまでの個人的な記録です。チュートリアルではなく、参照のみを目的としています。ご質問やご提案がございましたら、お問い合わせください。コメント欄にメッセージを。

開発機材構成を添付します。

1.vscodeをインストールする

vscodeをエンコードツールとして使用する

ダウンロードアドレス: Visual Studio Code のダウンロード - Mac、Linux、Windows

ダウンロード後、解凍してインストールしてください

2.XcodeとAndroid Studioをインストールする

Xcode

iOS 実デバイスまたはシミュレーターで Flutter アプリケーションを実行するには、Xcode をインストールする必要があります

Mac App Storeから Xcode の最新の安定バージョンをインストールします。

Androidスタジオ

実際の Android デバイスまたはエミュレータで Flutter アプリケーションを実行するには、Android Studio をインストールする必要があります。

Android Studio とアプリツールをダウンロード - Android Developers

Android Studio の最新の安定バージョンをダウンロードしてインストールします。

Macチップのタイプに応じてインストールバージョンを選択してください

3. IOSシミュレータの設定

ターミナルにコマンドコードを入力してiOSシミュレータを実行します。

open -a Simulator

追伸：

Q: ターミナルはどこにありますか?

回答:コマンドキー + スペースバーを押して、検索ポップアップウィンドウ、検索ターミナル、通常は最初のウィンドウを呼び出します。

4.Homebrewをインストールする

Homebrew は macOS 用のパッケージ管理ツール、またはパッケージマネージャーです。App Store に似たソフトウェアストアとして理解できます。ここでは FVM をインストールするツールとして使用されます。

次の指示をターミナルにコピーし、Enter キーを押して実行します。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

下の図は、Enter キーを押した後の実行結果を示しています。

自分でソースを選択し、対応するシリアル番号を入力して Enter を押し、Y を入力してスクリプトを実行します

しばらくお待ちください。下図のように Homebrew のインストールが完了します。インストールに失敗した場合は、別のソースからやり直してください。

ここでは、Core、Cask、またはサービスをインストールする必要があるかどうかを尋ねられます。これらを自分でインストールするかどうかを決定できます。

追伸：

Q: Core、Cask、サービスとは何ですか?

回答: Homebrew Coreは Homebrew コアソフトウェアリポジトリです。

Homebrew Cask は、QQ、Chrome などの Mac に Gui プログラムアプリケーションパッケージ (.dmg/.pkg) をインストールするために使用される、brew をベースにした拡張ツールです。まず、統合ディレクトリ (/opt/homebrew-cask/Caskroom) にダウンロードして解凍します。これにより、ダウンロード、解凍、ドラッグアンドドロップ (インストール) などの必要がなくなります。同様に、アンインストールも非常に簡単でクリーンです。次に、~/Applications/ ディレクトリにソフトリンクします。これは非常に便利で、AppStore には存在しない一般的に使用されるソフトウェアが多数含まれています。

Homebrew Services はlaunchctl、インストールされたサービスの管理に使用できるサービススイートです launchctl。macOS はコマンドを使用して、起動時に自動的に実行されるサービスをロードします。これにより、brew servicelauchctl の操作が簡素化されます。

参考文献:

Homebrew Core ソースの使用法に関するヘルプ — USTC Mirror ヘルプドキュメント

Mac_Schuyler_yuan のブログの Homebrew と Homebrew-cask - CSDN ブログ

自作学習 (5) 自作カスクと自作サービス - Aima.com

下の図は、インストールを選択してインストールが完了した後の表示を示しています。

ここのインストールプロセスには時間がかかりました~

Homebrew インストールのリファレンス:

中国 (国内住所) に Homebrew を自動的にインストールする方法 (Mac および Linux) - Zhihu

Homebrew の使用方法のリファレンス:

macOS 用の 2 番目の Mac App Store、Homebrew の使い方の詳細な説明 - Zhihu

5.FVMのインストール

ターミナルに次のコマンドを入力して、fvm ライブラリをローカルにコピーします。

brew tap leoafarias/fvm

完了したら、次のコマンドを入力して fvm をインストールします。

brew install fvm

以下のようにインストールが完了しました

追伸：

Q: アンインストールしたい場合はどうすればよいですか?

回答: 次の対応するコマンドをそれぞれターミナルに入力します。

brew uninstall fvm
brew untap leoafarias/fvm

参考文献:

Flutter バージョンマネージャー - FVM

6. SDK および依存パッケージのリソース環境変数を構成する

ターミナルに次のコマンドを入力して中国語イメージを構成します。

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

FLUTTER_STORAGE_BASE_URL は、flutter SDK のダウンロードソースを指定します

export PUB_HOSTED_URL=https://pub.flutter-io.cn

PUB_HOSTED_URL は、 pub get (依存関係パッケージ) のダウンロードソースを指定します。

追記：中国ではダウンロードできない場合がありますので、この変数を設定することでミラーアドレスを指定することができますが、ここでは上海交通大学Linuxユーザーグループのミラーをバックアップとして提供しています。

export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn

参考文献:

Flutter China Image の構成 – Jianshu-Mikel

7. fvm および flutter 環境変数を構成する

fvm

export FVM_HOME=$HOME/fvm

はためく

export PATH=$HOME/fvm/default/bin:$PATH

8. Flutter SDK バージョンのクエリとダウンロード

fvm -h はすべての fvm 命令を取得します

fvm releases はインストール可能な SDK バージョンを取得します

fvm install バージョン番号は、指定されたバージョンの SDK をインストールします。

以下の図は、バージョン 3.10.2 のインストールを例にしています。

fvm list を使用して、インストールされている SDK バージョンを表示します

バージョン 3.10.3 が以前にインストールされているため、リストには 2 つのバージョンがあります

fvm グローバルバージョン番号は、グローバルなデフォルトの SDK バージョンを設定します

グローバルのデフォルト SDK バージョンを設定した後、fvm list を使用してそれが有効かどうかを確認できます。

9.フラッターセルフチェック

ターミナルにFlutter Doctorと入力して、現在の環境に他の依存関係をインストールする必要があるかどうかを確認します (より詳細な出力を確認したい場合は、 -v パラメーターを追加するだけです)。

追伸：

このコマンドは、現在の構成環境をチェックし、コマンドラインウィンドウにレポートを生成します。Flutter をインストールすると、Dart SDK がインストールされるので、Dart を個別にインストールする必要はありません。上記のコマンドで生成されたレポートを注意深く読んで、インストールする必要がある依存関係や後で実行する必要があるコマンドを見逃していないかどうかを確認する必要があります (これは太字で表示されます)。

この記事の手順に従うと、次のレポートが得られるはずです。

上の図のようにエラーが1つ、警告が2つあるので、一つずつ解決していきます。

[✗] Android ツールチェーン - Android デバイス向けに開発

[✗] 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.

Android スタジオを開きます。インストール後に初めて開くときは、いくつかのリソースを設定してダウンロードする必要があります。「同意する」をクリックして次のステップに進みます。

最後に歩いて終了

以下に示すように、「SDK マネージャー」を選択します

赤枠のパスをコピーします

ターミナルに「flutter config --android-sdk」とコピーしたパスを入力します。

以下に示すインターフェイスに戻り、[SDK ツール]のリストで[Android SDK コマンドラインツール]を選択し、右下隅の [OK] をクリックしてインストールします。

インストールが完了したら、ターミナルにコマンドflutter Doctor --android-licenses を入力し、Enter キーを押して実行します。

実行後にいくつか質問が出ますが、「y」を入力してEnterを押してください。

[!] Xcode - iOS および macOS 向けに開発 (Xcode 14.3)

[!] Xcode - develop for iOS and macOS (Xcode 14.3)
    ✗ 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.

ターミナルに次のコマンドを入力して、cocoapods をインストールします。

sudo gem install cocoapods

実行後、以下のエラーが表示される場合があります

プロンプトに従い、ターミナルで次のコマンドを実行します。

sudo gem install activesupport -v 6.1.7.3

実行完了後、ターミナルに再度以下のコマンドを入力します。

sudo gem install cocoapods

ココアポッドのインストールが完了しました

[!] ネットワークリソース

[!] Network resources                   
    ✗ A network error occurred while checking "https://maven.google.com/": Operation timed out

ファイルを順番に検索します(最初にflutter/packages/flutter_tools/lib/src/http_host_validator.dartFinder の検索バーでflutter_toolsを検索し、次にステップごとに入力します。ここには 2 つの SDK バージョンがあるため、2 つの flutter_tools が存在します)

http_host_validator.dartvscode でファイルを開き、https://maven.google.com/ 次のように変更します。https://dl.google.com/dl/android/maven2/

Finder の検索バーで検索するflutter_tools.snapshot，删除该文件，再重复执行本文的第六步，即在终端中再次配置sdk和依赖包资源环境变量

ターミナルでフラッタードクターを再度実行してセルフチェックを行う

問題が見つからなかったことを示します

参考文献:

Flutter Learning Journey (1)_アスカ・アスナが妻のブログ - CSDNブログ

10. Flutter プロジェクトを作成して実行する

まずプロジェクトを保存するフォルダーを作成し、vscode でフォルダーを開き、ショートカットキーcontrol + `を使用してターミナルを呼び出し、ターミナルにfvm flutter create プロジェクト名を入力して Enter キーを押してプロジェクトを作成します

iOS 上で実行する

ターミナルでopen -a Simulatorを実行して iOS シミュレータを開きます (この記事の手順 3 を参照)。次に、 vscode ターミナルでcd project nameを実行してプロジェクトフォルダに入り、最後にfvm flutter runを実行してプロジェクトを実行します。