【Flutter】riverpodの単純な使い方

riverpodとは

riverpodは、FlutterおよびDartアプリケーションで使用するためのリアクティブキャッシングとデータバインディングフレームワークです。
riverpodは非同期コードの取り扱いを簡素化し、エラーやロード状態の管理を自動で行います。
さらに、ロジックをUIから分離し、コードのテスト性、スケーラビリティ、および再利用性を向上させます。

riverpod | Dart package

A reactive caching and data-binding framework. Riverpod makes working with asynchronous code a breeze.

pub.dev

使い方

1. インストール

pubspec.yamlファイルに以下の依存関係を追加します

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^2.5.1

2. Riverpodの設定

基本的な使用法

riverpodを使ってネットワークリクエストを定義し、UIでその結果をリッスンします。

例として、Bored APIを使用してランダムな活動を取得する関数を定義します：

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

@riverpod
Future<String> boredSuggestion(BoredSuggestionRef ref) async {
  final response = await http.get(
    Uri.https('https://boredapi.com/api/activity'),
  );
  final json = jsonDecode(response.body);
  return json['activity']! as String;
}

UIでのリッスンと状態管理

次に、UIでこのプロバイダをリッスンし、ロード中、エラー、データ取得後の状態をハンドリングします：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final boredSuggestion = ref.watch(boredSuggestionProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Bored Suggestion'),
      ),
      body: Center(
        child: boredSuggestion.when(
          loading: () => CircularProgressIndicator(),
          error: (error, stackTrace) => Text('Error: $error'),
          data: (data) => Text(data),
        ),
      ),
    );
  }
}

3. 高度な使用法

リフレッシュ機能の実装

riverpodでは、プルツーリフレッシュなどの高度なシナリオを簡単に実装できます。以下の例では、ボタンを押すと新しい活動提案を取得します：

class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final boredSuggestion = ref.watch(boredSuggestionProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('Bored Suggestion'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            boredSuggestion.when(
              loading: () => CircularProgressIndicator(),
              error: (error, stackTrace) => Text('Error: $error'),
              data: (data) => Text(data),
            ),
            ElevatedButton(
              onPressed: () => ref.refresh(boredSuggestionProvider),
              child: Text('Refresh'),
            ),
          ],
        ),
      ),
    );
  }
}

4. テストとスケーラビリティ

riverpodはロジックとUIを分離するため、テストが容易です。プロバイダをモック化し、異なるシナリオをテストできます。

import 'package:flutter_test/flutter_test.dart';
import 'package:mockito/mockito.dart';
import 'package:riverpod/riverpod.dart';

void main() {
  test('boredSuggestionProvider returns activity', () async {
    final container = ProviderContainer();
    final result = await container.read(boredSuggestionProvider.future);
    expect(result, isA<String>());
  });
}