😇

Flutterの導入に苦戦した話2️⃣-開発環境整備編

2024/03/05に公開

はじめに

今回の記事は前回の続きとなっておりますFlutter?何それという方は前回の記事を先に見ることをお勧めします。
https://zenn.dev/nenfa/articles/dfea62611af38d
↑前回の記事はこちら

環境の準備

前回の最後に

flutter doctor

を実行したと思います。
その際に❌がついていた物を準備していってください。

Web環境

Chromeを使用していきます。
やることはとても簡単Chromeをインストールするだけです。
https://www.google.com/chrome/
インストール後

#コマンド
flutter doctor

#結果
~省略
[✓] Chrome - develop for the web
~省略

のようになればWeb環境の準備は終わりです。
大体の人はインストール済みだと思うので最初から✅が入っていたのではないでしょうか?

Android環境

AndroidStudioをインストールしてください。
記事はいくらでもあると思うのでインストール方法は省きます。
AndroidStudioの準備ができたら、以下の作業を行います。

3個の点をkyリックすると出てくるメニューからSDKマネージャーを開き
「SDK Tools」タブを開きます。

Android SDK Command-line Toolsにチェックを入れて「Apply」ボタンをクリックします。
あとは適当に「Virtual Device Manager」から仮想端末を作成しておきましょう。

インストール後

#コマンド
flutter doctor

#結果
~省略
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)

~省略

これでAndroidもOKです。

IOS環境

AppstoreでXcodeをインストールします。
するとIOSシミュレータも一緒にインストールされます。

インストール後

#コマンド
flutter doctor

#結果
~省略
[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
~省略

こうなった場合はOKです。

しかし

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

こんな感じでエラーが出ることがあります。
もし出た場合はCocoaPodsをインストールする必要があります。
↓以下の記事で説明しています。
https://zenn.dev/nenfa/articles/f5b55b4675b2fe

終わりに

最終的には

[✓] Flutter (Channel stable, 3.16.3, on macOS 14.2.1 23C71 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] IntelliJ IDEA Community Edition (version 2022.1)//筆者環境であるだけなくてOK
[✓] VS Code (version 1.85.1)
[✓] Connected device (2 available)
[✓] Network resources

のようになってれば環境構築は終了ですお疲れ様でした。
筆者はCocoaPodsを入れるところで手こずったので参考になれば幸いです。

Discussion