Open11

Flutter初心者おじさん

s0ars0ar

なんもわからん
とりあえず

❯ 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ほしいだけ)インストールする。

s0ars0ar

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)

s0ars0ar
❯ 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して規約に同意しろ

おかのした

s0ars0ar
❯ 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の環境構築をやってる

s0ars0ar

XCodeのアップデートが一生終わらんので放置

プロジェクト作る

Githubリポジトリ作った
https://github.com/s-0-a-r/flutter_github_repos

❯ 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

s0ars0ar
❯ 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=

はい
なんかこういうのが使えるらしいんだけどよく分からんので一旦スルー。
必要になったら入れる(というか入れたけどうまく動かんというのが本音)

s0ars0ar

とりあえずcreateでできたカウンターアプリを整理してみた。
https://github.com/s-0-a-r/flutter_counter_app/pull/1

状態管理にはriverpodとfreezedを使うと良いらしい。

以下のように整理

  • model
    • Counter
      • カウント数管理
  • provider
    • CounterProvider
      • CounterのProvider(そのまま)
  • view
    • Counter
      • カウント数表示
    • IncrementButton
      • カウントを増やすボタン
  • view_model
    • CounterNotifier
      • CounterのViewModel

詳細な実装はPull Requestにある通りだが、freezedとriverpodの公式見て実装。
freezed使うとstateがimmutableになるのでStateNotifierで使える。
ViewModelをStateNotifierで実装するとStateNotifierProviderで実装できるってワケ

s0ars0ar

とりあえずリストのUIどうやってつくるんだ…?から始める
ListViewを使うらしい

そしてそもそもディレクトリ構成はどうしたらいいんだ…?ってなった
なのでディレクトリ構成を考える