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

今更Riverpod2.0について調べて発表する

Kuroneko-mayuge
September 23, 2023

 今更Riverpod2.0について調べて発表する

今更Riverpod2.0について調べて発表する

Kuroneko-mayuge

September 23, 2023
Tweet

More Decks by Kuroneko-mayuge

Other Decks in Business

Transcript

  1. Riverpod2
    系について調べたことを話

    株式会社Relic Ryo Kuroki

    View Slide

  2. About Me
    Ryo Kuroki
    株式会社Relic
    Flutter
    歴 業務では約3
    ヶ月 個人開発で約1

    EXPERIENCE

    View Slide

  3. 発表の対象者と目的
    目的
    Riverpod ver2.x
    についてこんな感じなんだ〜と知ってもらう
    対象者
    🙆 Riverpod
    は聞いたことあるが、まだ使ったことがない方(特にver2.x

    🙅‍♀️ Riverpod
    を熟知されている方、ver2.x
    もすぐに順応できる方

    View Slide

  4. なぜプロバイダが必要なのか
    アプリの様々な場所からステートにアクセス
    できるようになる
    シングルトンや依存性注入、
    などを分かりやすく代替することができる
    ステートを別のプロバイダのステートと簡単
    に組み合わせる事が可能
    複数のオブジェクトを組み合わせて
    1
    つのステートにまとめなくていい
    テスト容易性を高める
    パフォーマンス最適化
    同じ型のオブジェクトを公開するプロバイダ

    複数宣言できる
    final cityProvider = Provider((ref) => 'London');
    final countryProvider = Provider((ref) => 'England');

    View Slide

  5. v2.0
    以降のProvider
    の種類
    Provider 概要
    NotifierProvider v2.0から登場。メインの機能
    AsyncNotifierProvider v2.0から登場。FutureProviderではできない状態の変更が可能
    Provider これまで通り。Repositoryなどの状態を持たないケースで利用
    StateProvider NotifierProviderより非常に単純な場合。レガシー?
    StateNotifierProvider NotifierProviderを推奨と明記されている
    FutureProvider AsyncNotifierProviderを使うほどでもない、状態の変更を伴わない単純なユースケース
    StreamProvider FutureProviderのStream版
    ChangeNotifier 元々非推奨。ChangeNotifierProviderからの置き換えの手始めに最も簡単。

    View Slide

  6. code generation
    によってProvider
    の種類を意識せず最適なものを実装しやすい

    View Slide

  7. 初期値の設定を
    わかりやすく実装しやすい
    ここで、
    ref.watch(otherProvider)
    などと、
    他のprovider
    を参照できる
    状態を変更するメソッドを
    UI
    に公開する
    code generation
    によって
    NotifierProvider
    が生成される
    watch
    で監視しておくと便利
    part 'main.g.dart';
    @riverpod
    class Todos extends _$Todos {
    @override
    List build() {
    return [
    Todo(description: 'Learn Flutter', completed: true),
    Todo(description: 'Learn Riverpod'),
    ];
    }
    void addTodo(Todo todo) {
    state = [...state, todo];
    }
    }
    flutter pub run build_runner watch
    コード自動生成のための
    ファイル名とアノテーション

    View Slide

  8. class TodoListView extends ConsumerWidget {
    const TodoListView({super.key});
    @override
    Widget build(BuildContext context, WidgetRef ref) {
    List todos = ref.watch(todosProvider);
    return ListView(
    children: [
    for (final todo in todos)
    CheckboxListTile(
    value: todo.completed,
    onChanged: (value) =>
    ref.read(todosProvider.notifier).toggle(todo.id),
    title: Text(todo.description),
    ),
    ],
    );
    }
    }
    UI
    側の利用は特に変更なし
    UI
    側でstate
    の値をwatch
    UI
    側からstate
    を変更する

    View Slide

  9. // Riverpod 1系
    final fetchUserProvider = FutureProvider.autoDispose.family((ref, userId) async
    {
    final json = await http.get('api/user/$userId');
    return User.fromJson(json);
    });
    // Riverpod 2系
    @riverpod
    Future fetchUser(FetchUserRef ref, {required int userId, required int page}) async {
    final json = await http.get('api/user/$userId/$page');
    return User.fromJson(json);
    }
    autoDispose
    がデフォルトでON
    になった

    (
    破棄せず保持したい時はkeepAlive:true
    と明示する)
    引数を1
    個しか設定できなかったのが、任意で追加できるようになった

    View Slide