$30 off During Our Annual Pro Sale. View Details »

Riverpodに機能追加したときの話 (long ver.)

Riverpodに機能追加したときの話 (long ver.)

K9i - Kota Hayashi

July 14, 2023
Tweet

More Decks by K9i - Kota Hayashi

Other Decks in Programming

Transcript

  1. Riverpodに機能追加したとき
    の話 (long ver.)
    第4回 FlutterGakkai
    Kota Hayashi (K9i)

    View Slide

  2. 自己紹介

    View Slide

  3. YUMEMIについて
    - Flutterにも力入れてます
    - 新卒エンジニアとリードエンジニアを募集中

    View Slide

  4. YUMEMIについて
    - Flutterにも力入れてます
    - 新卒エンジニアとリードエンジニアを募集中
    定期的に勉強会を開催中
    タイミングがあったら参加してね

    View Slide

  5. Riverpod?
    - 日本だと特に人気が高い状態管理ライブラリ
    - 最近はデファクトスタンダード?
    - 世界的にはBLoCなんかも人気
    - https://docs-v2.riverpod.dev/

    View Slide

  6. 追加した機能

    View Slide

  7. 追加した機能
    Riverpod関連のWidget
    を相互に変換する

    View Slide

  8. BaseとなるWidgetの変換(Before)

    View Slide

  9. BaseとなるWidgetの変換(Before)
    flutter, flutter_riverpodパケージのWidgetを
    ConsumerWidgetかConsuerStatefulWidgetに変
    換可能

    View Slide

  10. BaseとなるWidgetの変換(After)

    View Slide

  11. BaseとなるWidgetの変換(After)
    すべて相互に変換可能

    View Slide

  12. 変更したパッケージ
    - Riverpodはマルチパッケージ構成
    - riverpod
    - flutter_riverpod
    - hooks_riverpod
    - riverpod_generator
    - riverpod_lint
    - など

    View Slide

  13. 変更したパッケージ
    - Riverpodはマルチパッケージ構成
    - riverpod
    - flutter_riverpod
    - hooks_riverpod
    - riverpod_generator
    - riverpod_lint
    - など
    MelostというDart向けのマ
    ルチパッケージ管理ツール
    が使われている
    https://melos.invertase.dev
    /~melos-latest

    View Slide

  14. 変更したパッケージ
    - Riverpodはマルチパッケージ構成
    - riverpod
    - flutter_riverpod
    - hooks_riverpod
    - riverpod_generator
    - riverpod_lint
    - など
    変更したのはこれ

    View Slide

  15. 機能追加の流れ
    1. Notionに既存処理の流れを洗い出した

    View Slide

  16. View Slide

  17. 機能追加の流れ
    1. Notionに既存処理の流れを洗い出した
    2. custom_lint_builderの使い方をキャッチアップ

    View Slide

  18. custom_lint_builderの使い方をキャッチアップ
    - riverpod_lintはcustom_lint_builderパッケージで実現されている
    - 使い方の説明はcustom_lintパッケージのreadme
    - https://pub.dev/packages/custom_lint#creating-a-custom
    -lint-package

    View Slide

  19. 機能追加の流れ
    1. Notionに既存処理の流れを洗い出した
    2. custom_lint_builderの使い方をキャッチアップ
    3. 実装
    4. hooks関連の問題発生

    View Slide

  20. hooks関連の問題発生
    - HookWidgetなどはhooks_riverpodを使ってるときだけ変換したい →
    custom_lintで利用パッケージを知るすべが無い

    View Slide

  21. 図解
    これらはオプションにしたい
    しかしcustom_lintからプロジェクトの利用
    パッケージを取得できない

    View Slide

  22. remiさんがcustom_lintを修正してくれた

    View Slide

  23. remiさんがcustom_lintを修正してくれた
    custom_lintの変更
    PR
    https://github.com/invertase/dart_custom_lint/p
    ull/137
    Changelog
    https://pub.dev/packages/custom_lint_builder/
    changelog#033---2023-04-06

    View Slide

  24. custom_lintの補足
    - Dart、Flutter用にオリジナルのlintルールを作れる要チェックパッケージ
    - lintを利用する:custom_lintパッケージ
    - lintを開発する:custom_lint_builderパッケージ
    - Invertaseが開発してる
    - といいつつほぼremiさんが作ってる?
    - riverpod_lintの開発の中で改良されてる感があり、
    custom_lint_builderを使うときはriverpod_lintが参考になる

    View Slide

  25. 無事リリース🥳

    View Slide

  26. 無事リリース🥳
    機能追加とかすると Changelogに書いてもらえ

    自分でOSSするときも参考にすると良さそうな
    運用

    View Slide

  27. おわり
    - Riverpod関連のWidgetを変換する機能を追加したよ
    - 今回の実装のPR
    - https://github.com/rrousselGit/riverpod/pull/2306

    View Slide