riverpod_graphなるものを使ってみる

これは何か?

Flutterの勉強会で、　riverpod_graphなるものが紹介されて気になって使ってみようと思ったのですが、躓いので、使い方のメモをするために記事を書くことにしました。

こちらの完成品を参考に遊んでみてください

https://enechange-meetup.connpass.com/event/318170/?utm_campaign=event_reminder&utm_source=notifications&utm_medium=email&utm_content=title_link

https://github.com/rrousselGit/riverpod/tree/master/packages/riverpod_graph

README.mdの解説

Work in progress

This project is a work-in-progress command that analyzes a Riverpod project and generates a graph of the interactions between providers/widgets

Example
Graphs can be generated using d2 or Mermaid text-to-graph syntax.

Here is graph example, generated from the Flutter Devtool project (which uses Riverpod).

進行中

このプロジェクトは、Riverpod プロジェクトを分析し、プロバイダー/ウィジェット間の相互作用のグラフを生成する進行中のコマンドです

例
グラフは、d2 または Mermaid のテキストからグラフへの構文を使用して生成できます。

これは、Flutter Devtool プロジェクト (Riverpod を使用) から生成されたグラフの例です。

やってみようと思ったけど😵

やり方がわからない...
友達の記事を参考に色々試していたらできたようだ...
https://qiita.com/isekiryu/items/8311756735234c4e445a

• やること
  • プロジェクトを作る
  • riverpodのコードを書く
  • riverpod_graphをインストールする

Visual Studio Code, Android Studioお好きなものをお使いください🧑‍💻

[デモ用の動画を作りました]
https://www.youtube.com/watch?v=44dlhG3dEO8

riverpod_graphをインストールする

dart pub global activate -sgit https://github.com/rrousselGit/riverpod.git --git-path packages/riverpod_graph

riverpodを追加する

add flutter_rivflutter pub add \
flutter_riverpod \
riverpod_annotation \
dev:riverpod_generator \
dev:build_runner \
dev:custom_lint \
dev:riverpod_linterpod

ProviderはカウンターでもNotifierでも同じmermaidが生成されるようです？
何かコツがありそう。

import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'greet.g.dart';

@riverpod
class GreetNotifier extends _$GreetNotifier {
  @override
  String build() {
    return 'Hello, Riverpod!';
  }

  void greetAction() {
    state = 'GoodMorning, Riverpod!';
  }
}

Providerは複数作ったりしたが、生成されるグラフに変化がなかったような...
と思ったら、プレビューすると生成される！

Githubだと操作ができる！
すごい！、動くぞ！

markdownを生成するコマンドはどれが正しいのかわからないですが、参考にしたものでできたので、こちらで試してみてください。
[見本]

dart pub global run riverpod_graph:riverpod_graph > ファイル名.md

[実行するコマンド]

dart pub global run riverpod_graph:riverpod_graph > greet.md

Obsidianというマークダウンエディタを私は使ってプレビューして確認をしました。　Android Studioだと設定したが何故か表示できなくなってる?

https://android.benigumo.com/20230306/androidstudio-markdown/

Analyzing /Users/MY_PJ/flutter_new/riverpod_graph_example ... は削除しないとプレビューされないようです？

[こんな風に書いてください]
これをmarkdownに貼り付けて、Githubで、Previewするとすごいの見れますよ笑

あっすいませんObsidianだと範囲が狭いのか全体のプレビュー表示されないようです💦
zennだと色もつくみたいです？

最後に

今日は、riverpodとWidgetの依存関係をnodeで表現しているのかな...
というツールの使い方について解説してみました。

Mermaidとは？
Markdown にインスピレーションを得たテキスト定義をレンダリングして図を動的に作成および変更する、JavaScript ベースの図作成およびグラフ作成ツール。
https://mermaid.js.org/