Flutterの環境構築関連（） - Ki-Kobayashi/flutter_wiki GitHub Wiki

🟩 環境構築（Win11 +　VSCode）

https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/06_chapter1_environment

🟧 環境構築（Mac +　VSCode）

https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/06_chapter1_environment https://zenn.dev/noe489/articles/b5a3571770250b

flutter doctor でXcodeのエラーで以下がでた場合

　→ Unable to get list of installed Simulator runtimes

🔸以下コマンドで解決　xcodebuild -downloadPlatform iOS https://zenn.dev/mukkun69n/articles/2f03fb7d64dbc6

🟩 VSCodeに入れとくと良いPlugin

Better Comments　：　コメントを見やすくする
Code Spell Checker　：　スペルがおかしいのを教えてくれる
Dart
Error Lens　：　エラーを見やすくする
flutter riverpod snippets Flutter freezed Helpers
Flutter
Flutter Color　：　カラーをコード上で一目でわかるようにする
GitLens
Japanese Language Pack for Visual Studio Code
Path Intellisense　：　「/」を先頭にいれることで、pathの補完をしてくれる
Svg Preview　：　SvgデータのPreviewを見れるようになる
Todo Tree　：　TODO一覧を見れるようになる
　　👉https://zenn.dev/posita33/articles/vscode_extension_todo_tree
Kotlin Language
Dart build_runner：ビルドランナーをUI制御・デフォで「--delete-confilicting-outputs」してくれる
GitHub　Pull Request and Issues: VSCodeでPR確認などができる
Pubsoec Assist：パッケージを導入・最新化が楽になる
Dart Barrel FIle Generator：階層ごとのバレルファイルが自動生成
Version Lens：パッケージの最新のバーション確認が楽になる
Flutter Coverrage Extension: テストコードの網羅率がわかる（lcov.infoファイル必須）
Coverage Gutters Extension：　テスト対象外が一目でわかる（lcov.infoファイル必須）
Melos
Github Copilot
Github Copilot Chat

🟩 VSCodeの設定

VSCodeの設定・ショートカット集

🟧 FVMの導入（Mac）

以下公式通りinstall 　→ https://fvm.app/documentation/getting-started/installation

サイト（https://qiita.com/okaxaki/items/07b40a95b9170834def2）参考に、以下コマンドを順に実行

fvm --version

fvm releases

fvm install 3.xx.x

fvm global 3.xx.x

fvm flutter doctor

👆で特に問題なければセットアップ完了.

🟩 FVMの導入（Windows）

🟡 FVMのインストール

dart pub global activate fvm

🟡 「fvm --version」で下記エラーが出る場合

'fvm' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。

「dart pub global activate fvm」再実行
Warning箇所でpathが表示される
Pathを環境変数に追加する（Pathを通す）

🟡 fvmがインストールされたか確認

※Pathを通したら、コマンドプロンプトやVSCodeを立ち上げ直して確認すること

　fvm --version

🟡 【🛑FVM導入済＋新規Proj作成なら、ここから】プロジェクトに指定したFLutterSDKを適用

最新の安定バージョンの確認　：　fvm releases
　　👉stable となっている最新のバージョンを確認する
バージョンを変更しコマンドを、実行　:　fvm use 3.13.4

※上記バージョンがインストールされていなければ聞かれるので、「y」押下

🟡 useコマンドからのSDKインストールで、下記エラー出る場合

 　Could not install 3.13.4
  　     or
　 Seems you don't have the required permissions on

💎管理者コマンドプロンプトから、プロジェクトのルートへ移動し、「`fvm use 3.13.4`」を実行する

🟡※補足※

FVMを導入したら、ターミナルでflutterコマンドを使用するとき、先頭にfvmをつける必要があります。
（例）
　・導入前：flutter clean
　・導入”後"：fvm fllutter clean

🛑重要🛑 VSCodeに以下追記

🛑.gitignore

　.fvm/flutter_sdk　←追記
　　https://fvm.app/docs/getting_started/configuration

🛑.vscode/settings.json

　　※↑ファイルの開き方（ワークスペース）
・「>open settings json」をVSCode上部から入力
・選択肢から、ワークスペースの方を選択
・以下を追記

{
  "dart.flutterSdkPath": ".fvm/flutter_sdk",
  // Remove .fvm files from search
  "search.exclude": {
    "**/.fvm": true
  },
  // Remove from file watching
  "files.watcherExclude": {
    "**/.fvm": true
  }
}

🟩 Freezedについて

ーーーーーーーーーーーーー【　Freezed　】ーーーーーーーーーーーー https://note.com/saburo_engineer/n/n2c3774008016

グローバルにステート情報を管理したい場合：Riverpod、一つのwidgetでステート情報が完結する場合：Flutter Hooks

🟩 新規プロジェクトの作成手順

ctrl + Shift + p から　コマンドパレットを開き、「flutter」と入力
【Flutter: NewProject】-> 【application】を選択
格納したいフォルダーを選択（flutter_projなど）
Project 名を入力
生成されたProjectより、LinuxやWebなど、不要なフォルダーは削除
FVMで使用するFlutterSDKのバージョンを指定（※次項で手順解説）
以下の設定
VSCodeの設定・ショートカット集
pubspec.yamlに必要なパッケージを追加（以下よく使いそうなもの）

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  freezed_annotation: ^2.4.1
  json_annotation: ^4.8.1
  flutter_hooks: ^0.20.1
  hooks_riverpod: ^2.4.0
  riverpod_annotation: ^2.1.5
  go_router: ^10.2.0
  dio: ^5.3.2
  retrofit: ^4.0.1
  shared_preferences: ^2.2.2
  url_launcher: ^6.1.14
  intl: ^0.18.1
  permission_handler: ^11.0.0
  flutter_native_splash: ^2.3.2
  sprintf: ^7.0.0
  email_validator: ^2.1.17
  envied: ^0.3.0+3
  scroll_to_index: ^3.0.1
  scrollable_positioned_list: ^0.3.8
  flutter_svg: ^2.0.7
  timeago: ^3.5.0
  logger: ^2.0.2+1
  share_plus: ^7.2.1
  google_fonts: ^6.1.0
  flutter_html: ^3.0.0-beta.2
  app_links: ^3.4.5
  flutter_secure_storage: ^9.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0
  freezed: ^2.4.1
  json_serializable: ^6.7.1
  build_runner: ^2.4.6
  riverpod_generator: ^2.3.2
  riverpod_lint: ^2.1.0
  custom_lint: ^0.5.3
  retrofit_generator: ^7.0.8
  envied_generator: ^0.3.0+3

以下のコマンド実行
fvm flutter clean
fvm flutter pub get

🟡

🟩 エラー対処

🟡 Flutterコマンドを叩くと「"Unable to find git in your PATH"」エラーがでる

※FVMが導入されている前提（pathも通してる）で試したこと（FVM導入方法：こちら） ※下記のいずれかの対処で行ける、、、はず、、、

★公式DLしたFlutterSDKと、関連する環境変数のPathを削除
★システム環境変数のPathに以下の順でPathが通っているか（なければ追加）

2023-10-07_03h41_00

★管理者cmdを開き、flutter --version でバージョン表示されるか　* 表示されるなら、flutter doctor を実行し、エラーで出てきたPathを環境変数に追加する
最新のGitをインストール
「git config --global --add safe.directory C:/[yourdirectory]/[flutter-base-dir]」をcmdから叩く
「git config --global --add safe.directory '*'」をcmdから叩く