Flutterの構築 アプリ起動まで

なかなか見本通りに行かなかったので備忘録

目次

• 目次
• Flutter のインストール
• Android のセットアップ
• iOS のセットアップ
• flutter doctor を実行してエラーを解消
• アプリ起動
• 参考

Flutter のインストール

1. 公式からインストール
2. ユーザーフォルダ直下に「development」フォルダを作成し、ダウンロードした「flutter」フォルダを移動
3. パスを通す
   1. 使用しているシェルを調べる

        $ echo $SHELL
      

   2. シェルに応じてパスを設定

        // zshの場合
        $ echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
        $ source ~/.zshrc
      

      bashが返ってきた場合上記のzshrcをbash_profileに置換。
   3. パスが通ってるか確認

        which flutter
      

Android のセットアップ

1. Android Studio 公式 HPからダウンロードし、案内に従ってインストール
2. Welcome To Androidが表示されたら、左のメニューバーからPluginsからFlutterを検索してダウンロード
3. Android Studio を再起動し、初期画面に「New Flutter Project」があることを確認
4. プロジェクトを作成
   1. Nameに任意の名前を入れる
   2. 右上のツールバーからスマホアイコンを選択
   3. 右のdevice一覧にある端末から▶を押して起動

iOS のセットアップ

1. AppStoreからXcodeをダウンロード
   ※結構時間かかる
2. Xcode を起動して端末を選択してデータをダウンロード
   なぜかセットアップが完了しないので$ flutter doctor -vを実行すると、Xcodeでエラー吐いてた。
   cocoapodsもないよ〜ってエラー返ってきてたので下記も実行

   $ brew install cocoapods
   $ pod setup
   

   下記を実行するようエラーが返ってきたので追加で実行

   $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
   $ sudo xcodebuild -runFirstLaunch
   

   Android StudioからiOSも起動できるのかと思ったけど、いろんなサイト見てるとSimulatorで起動できてれば大丈夫そうなのでここで中断。

flutter doctor を実行してエラーを解消

下記エラーが返ってきたけどpath/to/sdkmanagerが分からず詰んだ。

 Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

Android Studioの起動画面、右上の三点リーダーから「Android SDK」を選択し、「SDK Tools」＞「Android SDK Command-line Tools(latest)」と選択して設定を進める。
インストール完了後、ターミナルで再度flutter doctorを実行するとエラー解消

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.1-0.0.pre.1, on macOS 14.1.1 23B81 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.2)
[✓] Connected device (3 available)
[✓] Network resources

アプリ起動

1. /Users/【ユーザー名】/StudioProjects/【Android studioでつけた名前】/でVScodeを開く
2. ターミナルで以下を実行

   $ flutter create 【任意のアプリ名】
   

3. プロジェクトのNull安全を有効にする

   $ ~/development/flutter/bin/dart migrate --apply-changes
   

4. 任意のアプリ名をつけたフォルダに移動

   $ cd 【任意のアプリ名】
   

5. デバックしたいdeviceを起動しておく
   Android studio を起動してからflutter runを実行すればAndroid,
   Xcode で iOSのdevice起動してからflutter runを実行すればiOS画面を確認できる

   $ flutter run
   

   ※ flutter runはかなり時間がかかる
   ※ 他にも方法は色々ありそうだったけど、自分にとってはこれが一番楽だった
6. 【任意のアプリ名】/lib/main.dartの中身を変えると起動した画面の中身も変わる

参考

-Flutterの環境構築(Mac編) | Zenn
-【Android Studioの使い方】プロジェクトを削除する
-flutter-study.dev
-【Mac M1】「flutter doctor」実行時の「cmdline-tools component is missing」の解決法 | Zenn
-FlutterでHelloWorldを動かすまで | Qiita