Flutter触ってみる

fvm 経由でFlutterをインストールする

terminal

## Dart インストール
brew tap dart-lang/dart
brew install dart

## FVM インストール
brew tap leoafarias/fvm
brew install fvm

## インストール可能な Flutter バージョン一覧を確認
fvm releases

## 指定した Flutter バージョンをインストール
fvm install 3.13.19

## インストール済みな Flutter バージョン一覧を確認
fvm list

## プロジェクトで使用する Flutter バージョンを指定する
fvm use 3.13.19 --force

## Flutter が正しくインストールされたか確認する
fvm flutter --version

## Flutter の実行環境が整っているか確認する
flutter doctor

chamo

`flutter doctor`でのエラー解決

Flutterのバージョンは出るけどパスが通ってないよ〜

fvm経由でFlutterを入れ直す

パスを通す

.zshrc

// 変更前
export PATH=$PATH:/Users/[username]/develop/practice/flutter/bin

// 変更後
export PATH="$PATH":"$HOME/fvm/default/bin"

Android toolchain - develop for Android devices (Android SDK version 33.0.2) cmdline-tools component is missing

Android license status unknown.

Android Studioの設定を変更

Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
以下のコマンドを実施（-yのオプションをつけてもいいかも？）

flutter doctor --android-licenses

Warning: dart on your path resolves to...
https://note.com/masaki0216/n/n7fb4fe2b9f3f

## flutter 起動確認
fvm flutter create sample_app && cd sample_app
fvm flutter pub get
fvm flutter run --web-port 4444 -d web-server --web-renderer html

chamo

Riverpod をインストールする

ideaコマンドのようなことを Android Studio でもできるようにしたい

Flutter プロジェクトでホットリロードができるようにする

Flutter 公式のチュートリアルをやってみる

chamo

FlutterをIDEAで開発できるようにする

FlutterでTODOアプリを使ってみる

参考記事

※記事内のバージョンは Flutter が2.0.1、Dart が2.12.0だが、2023年11月26日時点でのバージョンは Flutter が3.16.0、Dart が3.2.0なので書き方に気を付ける。

Flutter公式ドキュメント

https://docs.flutter.dev/

chamo

IDEAでiOS Simulatorが動かない

現象

flutter createで作成したプロジェクトでiOS Simulator、Android Simulatorが動かない
Chromeは動作する

build時に以下エラーが発生しているのが原因…？

`<XCBuildConfiguration name=`Debug` UUID=`331C8088294A63A400263BE5`>` attempted to initialize an object with an unknown UUID. `AE0B7B92F70575B8D7E0D07E` for attribute: `base_configuration_reference`. This can be the result of a merge and the unknown UUID is being discarded.

前提

ios側のバージョン管理はios/ 配下のPodsfileで行われている
→通常はflutter createでPodsfileが生成されるが、されないこともある

Podsfileがない場合：

ルートでflutter pub get : 依存関係の解消

ios/ 配下でpod init : CocoaPodsの初期化

解決策

🚨エラー：

[!] `<XCBuildConfiguration name=`Debug` UUID=`331C8088294A63A400263BE5`>` attempted to initialize an object with an unknown UUID. `AE0B7B92F70575B8D7E0D07E` for attribute: `base_configuration_reference`. This can be the result of a merge and the unknown UUID is being discarded.
...

XCode内でUUIDの競合が起きているらしい。
name=AppName で、競合が起きているアプリ名が記載されている。

↓

Xcodeプロジェクトのクリーン：
Xcodeを開き、プロジェクトを選択した状態で「Product」メニューから「Clean Build Folder」を選択する。
これにより、ビルドに関連する一時ファイルが削除される。
Derived Dataの削除：
XcodeのDerived Dataフォルダを削除。これには、プロジェクトに関連する一時ファイルやキャッシュが含まれている。
PodfileとCocoaPodsの再インストール：
プロジェクトのios/フォルダでpod deintegrateコマンドを実行し、CocoaPodsの設定を削除。
その後、pod installを再実行して、依存関係を再インストール。
Xcodeでの再ビルド：
これらの変更を行った後、Xcodeで再ビルド。

🚨エラー：

The Podfile does not contain any dependencies.
→Podsfileに依存関係がないだけなので一旦無視する

🚨エラー：

CocoaPods did not set the base configuration of your project because your project already has a custom config set. In order for CocoaPods integration to work at all, please either set the base configurations of the target `Runner` to `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` or include the `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` in your build configuration

Automatically assigning platform `iOS` with version `11.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

chamo

pubspec.yaml の environment に Flutter のバージョン制約がなかったので追加していく。
一旦以下で定義してみる。

environment:
  sdk: '>=3.2.3 <4.0.0'
  flutter: '>=3.0.0 <4.0.0'

chamo

【追記】
端末再起動 + XCodeのキャッシュクリアで問題なく起動した。
上記の対応は不要かも…？

chamo

ディレクトリ構成の変更

今回やりたいアーキテクチャ的にモノリポの方が都合がいいのでモノリポにする。
初期の構成と比べると apps と packages を追加している。

├── README.md
├── analysis_options.yaml
├── apps
│   ├── android
│   ├── build
│   ├── ios
│   ├── lib
│   ├── macos
│   ├── pubspec.lock
│   ├── pubspec.yaml
│   ├── test
│   └── web
├── build
│   ├── ...
│   ├── ios
│   └── last_build_run.json
├── list_app.iml
├── packages
│   ├── linux
│   └── windows
├── pubspec.lock
├── pubspec.yaml
└── renovate.json

apps 配下にアプリケーションを配置したいが、 flutter run は pubspec.yaml がないと動いてくれないので、追加することを忘れないようにする。

flutter doctorでのエラー解決

IDEAでiOS Simulatorが動かない

現象

前提

解決策

🚨エラー：

🚨エラー：

🚨エラー：

ディレクトリ構成の変更

`flutter doctor`でのエラー解決