エキサイトメディア事業部で採用しているRiverpodの使用法

Flutter Flutter

はじめに

現状まだまだネイティブからFlutterへの移行の途中であり、最初期の構成としてはViewModelを定義してViewModelをStateNotifierProviderで状態管理している変数をView側に通知するようにしていたり、View側のタップ処理を受け付けるようにしていました。今回紹介するものは構成を再考したものです。ここで挙げたものは今後また変わるかもしれませんが一つの使い方として楽しんでいただけると幸いです。

それぞれのProviderの使い方

Provider

タップ処理などのEvent系を受け取って処理を走らせるために使用しています。 また、Repositoryもこちらを使用してどこからでも使用できるようにしています。

final hogeEventProvider = Provider<HogeEvent>((ref) => HogeEvent(ref));
class HogeEvent {
  const HogeEvent(this._ref);
  final Ref _ref;

  void onTap() {}
}

final countRepositoryProvider = Provider<CountRepository>((_) => CountRepository());

class CountRepository {
  Future<int> getCount() async {
    // APIから取得処理など
  }
}

StateProvider

そのファイル内に値を保持しておいたり、Screen側に値を渡したいときに使用しています。

final countProvider = StateProvider<int>((_) => 0);

// 更新するとき
ref.read(countProvider.notifier).state++;
// 初期化したいとき
ref.refresh(countProvider);

FutureProvider

AsyncValueを使用してそれぞれの画面状態(dataがあるとき, loading, error)を出し分けるために基本的には使用しています。

final countFutureProvider = FutureProvider<int>((ref) async {
  return await ref.read(countRepositoryProvider).getCount();
});

@override
Widget build(BuildContext context, WidgetRef ref) {
  return Scaffold(
    body: ref.watch(hogeProvider).when(
      data: (count) {
        return Center(
          child: Text(count.toString()),
        );
      },
      loading: () => Center(
        child: CircularProgressIndicator(),
      ),
      error: (error, stackTrace) => Center(
        child: ErrorWidget(error, stackTrace),
      ),
    ),
  ),
},

最後に

エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。今回の記事を読んで少しでも興味が湧きましたら是非応募お願い致します！！

就業型インターンの募集情報です！ www.wantedly.com

募集職種一覧はこちらになります！カジュアル面談からでも構いません。 www.wantedly.com