Flutter初心者おじさん
これをやるらしい
なんもわからん
とりあえず
❯ brew install --cask flutter
して
❯ flutter doctor
zsh: correct flutter to _flutter [nyae]? n
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.2, on macOS 12.5.1 21G83 darwin-arm, locale ja-JP)
[✗] 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.
[!] Xcode - develop for iOS and macOS (Xcode 13.4.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.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.71.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
! Doctor found issues in 3 categories.
XCodeアップデートとAndroid Studio(SDKほしいだけ)インストールする。
Android Studioインストールした。
❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.2, on macOS 12.5.1 21G83 darwin-arm, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.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.
[!] Xcode - develop for iOS and macOS (Xcode 13.4.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.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.71.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
! Doctor found issues in 2 categories.
cmdline-tools
が足りない。入れる。
Android StudioのPreference > Preference > SystemSettings > 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.3.2, on macOS 12.5.1 21G83 darwin-arm, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 13.4.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.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.71.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
! Doctor found issues in 2 categories.
flutter doctor --android-licenses
して規約に同意しろ
おかのした
❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.2, on macOS 12.5.1 21G83 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 13.4.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.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.71.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
! Doctor found issues in 1 category.
Android終わり
何やってんのかわかんなくなってきた
おれはFlutterの環境構築をやってる
XCodeのアップデートが一生終わらんので放置
プロジェクト作る
Githubリポジトリ作った
❯ flutter create flutter_github_repos
Creating project flutter_github_repos...
Running "flutter pub get" in flutter_github_repos... 1,213ms
Wrote 127 files.
All done!
In order to run your application, type:
$ cd flutter_github_repos
$ flutter run
Your application code is in flutter_github_repos/lib/main.dart.
❯ cd flutter_github_repos
❯ git init
❯ git branch -m main
❯ git add .
❯ git commit -m init
❯ git push -u origin main
Yeah
❯ flutter run
Multiple devices found:
macOS (desktop) • macos • darwin-arm64 • macOS 12.5.1 21G83 darwin-arm
Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): 2
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome... 10.0s
This app is linked to the debug service: ws://127.0.0.1:52089/SN91t5380Ak=/ws
Debug service listening on ws://127.0.0.1:52089/SN91t5380Ak=/ws
💪 Running with sound null safety 💪
🔥 To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:52089/SN91t5380Ak=
Flutter Web Bootstrap: Programmatic
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:52089/SN91t5380Ak=
はい
なんかこういうのが使えるらしいんだけどよく分からんので一旦スルー。
必要になったら入れる(というか入れたけどうまく動かんというのが本音)
とりあえずcreateでできたカウンターアプリを整理してみた。
状態管理にはriverpodとfreezedを使うと良いらしい。
以下のように整理
- model
- Counter
- カウント数管理
- Counter
- provider
- CounterProvider
- CounterのProvider(そのまま)
- CounterProvider
- view
- Counter
- カウント数表示
- IncrementButton
- カウントを増やすボタン
- Counter
- view_model
- CounterNotifier
- CounterのViewModel
- CounterNotifier
詳細な実装はPull Requestにある通りだが、freezedとriverpodの公式見て実装。
freezed使うとstateがimmutableになるのでStateNotifierで使える。
ViewModelをStateNotifierで実装するとStateNotifierProviderで実装できるってワケ
Providerはファイルに分けなくても良い
(Provider自体の実装はほんの1行なのでProviderが増えるとファイルに分けるほうが煩雑)
CounterNotifierのファイルに移動。
一旦ここまででカウンターアプリはおしまい。
とりあえずリストのUIどうやってつくるんだ…?から始める
ListViewを使うらしい
そしてそもそもディレクトリ構成はどうしたらいいんだ…?ってなった
なのでディレクトリ構成を考える