Riverpod https://techgrowup.net エンジニアを強くする Sat, 12 Oct 2024 05:13:49 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://techgrowup.net/wp-content/uploads/2021/05/hp-icon-150x150.png Riverpod https://techgrowup.net 32 32 Flutter開発入門47 hooks_riverpodでのStreamProvider、NotifierProvider、StateNotifierProvider、ChangeNotifierProviderの使い方 https://techgrowup.net/flutter-hooks-riverpod-each-provider/ https://techgrowup.net/flutter-hooks-riverpod-each-provider/?noamp=mobile#respond Sat, 12 Oct 2024 05:12:49 +0000 https://techgrowup.net/?p=1955 はじめに

hooks_riverpodは、Flutterアプリの開発において、強力で柔軟な状態管理を提供します。特に、非同期処理を扱うためのStreamProvider、状態を管理するためのNotifierProviderやStateNotifierProvider、および従来のChangeNotifierに基づいたChangeNotifierProviderは、それぞれの場面で最適なソリューションを提供します。

この記事では、StreamProvider、NotifierProvider、StateNotifierProvider、ChangeNotifierProviderの使い方について詳しく解説します。Flutter開発を効率化し、状態管理をよりシンプルにするための実践的な知識を提供します。

hooks_riverpodとは？

hooks_riverpodは、Riverpodの状態管理機能とFlutter Hooksのフック機能を統合したライブラリです。Riverpodによる強力な状態管理に、Flutter Hooksを組み合わせることで、ウィジェットのライフサイクルに応じた簡潔な状態管理を実現します。

この記事では、特に以下のプロバイダについて詳しく見ていきます。

  • StreamProvider：非同期データのストリームを管理。
  • NotifierProvider：Notifierクラスをベースにした状態管理。
  • StateNotifierProvider：StateNotifierを使って状態を管理する。
  • ChangeNotifierProvider：従来のChangeNotifierベースの状態管理。

※hooks_riverpodが導入が済んでいない方は以下記事を確認してください。

Flutter開発入門46 hooks_riverpodの使い方：効率的な状態管理を実現
Flutterアプリでの状態管理に欠かせないhooks_riverpodを徹底解説。useProviderは廃止され、WidgetRefとref.watchを使った効率的な状態管理方法を解説します。
techgrowup.net
2024.10.12

StreamProviderの使い方

StreamProviderは、非同期でデータのストリームを提供する際に使用します。たとえば、リアルタイムに更新されるデータや、ストリームAPIのデータを扱う場合に便利です。

例：StreamProviderでのリアルタイムカウント

final countStreamProvider = StreamProvider<int>((ref) {
  return Stream.periodic(const Duration(seconds: 1), (count) => count);
});

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final asyncValue = ref.watch(countStreamProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('StreamProvider Example')),
      body: Center(
        child: asyncValue.when(
          data: (count) => Text('Count: $count'),
          loading: () => CircularProgressIndicator(),
          error: (err, stack) => Text('Error: $err'),
        ),
      ),
    );
  }
}

解説

  • StreamProvider：非同期ストリームをプロバイダとして提供し、UIにリアルタイムで反映できます。
  • Stream.periodic：一定の間隔でデータを発行するストリームの生成方法です。
  • asyncValue.when：StreamProviderの状態に応じて、データ・ローディング・エラーのそれぞれを表示します。

NotifierProviderの使い方

NotifierProviderは、Notifierクラスに基づいたプロバイダで、Notifierを使って状態を管理し、それに応じてUIをリビルドする際に使用します。Notifierは、状態を持たせ、notifyListenersで更新するシンプルな仕組みです。

例：NotifierProviderでカウンターを管理

class CounterNotifier extends Notifier<int> {
  @override
  int build() => 0;

  void increment() => state++;
}

final counterProvider = NotifierProvider<CounterNotifier, int>(() {
  return CounterNotifier();
});

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('NotifierProvider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $count', style: const TextStyle(fontSize: 40)),
            ElevatedButton(
              onPressed: () => ref.read(counterProvider.notifier).increment(),
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

  • Notifier：シンプルな状態管理クラスで、状態を管理し、変更があった際にリビルドをトリガーします。
  • NotifierProvider：Notifierをプロバイダとして使用し、状態を管理します。
  • ref.watch(counterProvider)：カウンターの現在の値を監視し、UIに反映します。
  • ref.read(counterProvider.notifier).increment()：Notifierのメソッドを使って状態を変更します。

StateNotifierProviderの使い方

StateNotifierProviderは、StateNotifierクラスを使って、状態を細かく管理したいときに便利です。StateNotifierは、状態を変更するためのメソッドを定義でき、状態の変更を安全に管理できます。

例：StateNotifierProviderでカウンターを管理

class CounterStateNotifier extends StateNotifier<int> {
  CounterStateNotifier() : super(0);

  void increment() => state++;
}

final counterStateNotifierProvider =
    StateNotifierProvider<CounterStateNotifier, int>((ref) {
  return CounterStateNotifier();
});

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterStateNotifierProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('StateNotifierProvider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $count', style: const TextStyle(fontSize: 40)),
            ElevatedButton(
              onPressed: () =>
                  ref.read(counterStateNotifierProvider.notifier).increment(),
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

  • StateNotifier：状態を管理するためのクラスで、複雑なロジックにも対応できます。
  • StateNotifierProvider：StateNotifierをプロバイダとして使用し、状態の管理を行います。
  • state：現在の状態を保持するプロパティで、状態が更新されるとリビルドがトリガーされます。

ChangeNotifierProviderの使い方

ChangeNotifierProviderは、従来のChangeNotifierベースの状態管理を使いたい場合に有効です。ChangeNotifierは、notifyListenersメソッドを使って状態の更新を通知します。

例：ChangeNotifierProviderでカウンターを管理

class CounterChangeNotifier extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

final counterChangeNotifierProvider =
    ChangeNotifierProvider<CounterChangeNotifier>((ref) {
  return CounterChangeNotifier();
});

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterChangeNotifierProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('ChangeNotifierProvider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: ${counter.count}',
                style: const TextStyle(fontSize: 40)),
            ElevatedButton(
              onPressed: () => counter.increment(),
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

  • ChangeNotifier：リスナーに状態の変更を通知するためのクラスで、従来のFlutterの状態管理でよく使われます。
  • ChangeNotifierProvider：ChangeNotifierをプロバイダとして使用し、notifyListenersでUIをリビルドします。

まとめ

Flutterでの状態管理において、hooks_riverpodは強力なツールです。今回紹介したStreamProvider、NotifierProvider、StateNotifierProvider、およびChangeNotifierProviderを適切に使い分けることで、アプリケーションの規模に関わらず、効率的に状態を管理できます。それぞれのプロバイダは特定のユースケースに最適化されており、状態の再利用や非同期データの管理に役立ちます。

]]> https://techgrowup.net/flutter-hooks-riverpod-each-provider/feed/ 0 Flutter開発入門46 hooks_riverpodの使い方：効率的な状態管理を実現 https://techgrowup.net/flutter-hooks-riverpod/ https://techgrowup.net/flutter-hooks-riverpod/?noamp=mobile#respond Sat, 12 Oct 2024 04:55:31 +0000 https://techgrowup.net/?p=1951 はじめに

hooks_riverpodは、Flutterでの状態管理ライブラリRiverpodとフック機能Flutter Hooksを組み合わせた強力なパッケージです。hooks_riverpodを使うことで、状態管理がシンプルになり、状態に応じたUIの更新を直感的に行えるようになります。特に、フックを活用することで、状態の管理やリソースのクリーンアップを簡潔に記述できるため、より効率的にFlutterアプリケーションを開発できます。

この記事では、hooks_riverpodのセットアップから基本的な使い方、実際の利用例まで詳しく解説します。Flutterの開発経験がある方でも、hooks_riverpodを使うことで、状態管理がさらに快適になるでしょう。

hooks_riverpodとは

hooks_riverpodは、Riverpodの状態管理機能とFlutter Hooksのフック機能を統合したパッケージです。Flutter Hooksのコンセプトを取り入れることで、状態管理とUIのロジックをシンプルに記述でき、リソースのクリーンアップなどが簡単になります。

hooks_riverpodの主な特徴

  • フックを活用したシンプルな状態管理：状態の管理やUIの更新がより直感的に行える。
  • リソースのクリーンアップが簡単：フックによって、不要になったリソースを自動的に解放できる。
  • Riverpodのすべての機能に対応：Riverpodのプロバイダや依存関係管理をそのまま利用可能。

なぜhooks_riverpodを使うべきか？

  1. UIロジックを簡潔に記述：状態管理とUIロジックがフックによってシンプルにまとめられます。
  2. 効率的なリソース管理：ウィジェットのライフサイクルに応じてリソースを自動的にクリーンアップ。
  3. パフォーマンス向上：不要な再レンダリングを防ぐことで、アプリケーションのパフォーマンスが向上します。

hooks_riverpodのセットアップ

まず、pubspec.yamlにhooks_riverpodパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  hooks_riverpod: ^2.5.1

次に、依存関係をインストールします。

flutter pub get

hooks_riverpodの基本的な使い方

1. ProviderScopeでアプリを包む

まず、hooks_riverpodを使用する際は、アプリケーション全体をProviderScopeで包む必要があります。これにより、すべてのプロバイダがアプリ全体で利用できるようになります。

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

2. ref.watchを使ったプロバイダの状態監視

hooks_riverpodの基本的な状態管理は、プロバイダを使って行います。useProviderは廃止され、代わりにWidgetRefを使ってref.watchで状態を監視するのが現在の標準です。

例：シンプルな文字列プロバイダ
final helloWorldProvider = Provider<String>((ref) => 'Hello, World!');

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // WidgetRefを使ってプロバイダの状態を監視
    final value = ref.read(helloWorldProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Riverpod with Hooks')),
      body: Center(child: Text(value)),
    );
  }
}

3. StateProviderを使った状態変更

StateProviderを使えば、カウンターのような状態を簡単に管理できます。WidgetRefを使って、ref.watchやref.readを活用し、状態の監視や変更を行います。

例：カウンターアプリの実装
final counterProvider = StateProvider<int>((ref) => 0);

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // カウンターの値を監視
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Counter Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $count', style: TextStyle(fontSize: 40)),
            SizedBox(height: 20),
            ElevatedButton(
              // カウンターの値を変更
              onPressed: () => ref.read(counterProvider.notifier).state++,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

  • ref.watch(counterProvider)：カウンターの現在の値を取得して監視します。状態が変更されるたびにUIがリビルドされます。
  • ref.read(counterProvider.notifier)：状態を直接操作して変更するために使用します。

非同期処理とFutureProvider

非同期処理を行う場合は、FutureProviderを使います。以下は、APIなどのデータを非同期で取得する例です。

final dataProvider = FutureProvider<String>((ref) async {
  await Future.delayed(Duration(seconds: 2));
  return 'Hello from Future!';
});

class HomeScreen extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // 非同期データを監視
    final asyncValue = ref.watch(dataProvider);

    return Scaffold(
      appBar: AppBar(title: Text('FutureProvider Example')),
      body: Center(
        child: asyncValue.when(
          data: (value) => Text(value),
          loading: () => CircularProgressIndicator(),
          error: (err, stack) => Text('Error: $err'),
        ),
      ),
    );
  }
}

解説

  • FutureProvider：非同期データを提供するプロバイダで、APIリクエストやデータベース操作などに使われます。
  • asyncValue.when：非同期処理の状態に応じて、データ表示、ローディングインジケーター、エラーメッセージの表示を切り替えます。

Riverpodのベストプラクティス

  1. ProviderScopeを適切に使用
    • すべてのプロバイダはProviderScope内で管理されるため、これをアプリのルートに配置することで、すべてのプロバイダが適切に管理されます。
  2. ref.watchとref.readの使い分け
    • ref.watch：プロバイダの値を監視し、変更があるたびにUIを再レンダリングします。
    • ref.read：値を一度取得するだけ、または値を更新する場合に使います（再レンダリングは行われません）。
  3. 非同期データの管理
    • FutureProviderやStreamProviderを使って非同期データの状態（ロード中、エラー、成功）を適切に処理することが、ユーザーフレンドリーなUIを提供する鍵です。

まとめ

hooks_riverpodを活用することで、Flutterアプリケーションの状態管理が簡単になり、UIロジックがシンプルに記述できます。特に、WidgetRefを使ったref.watchによる状態管理は直感的で、プロジェクトの複雑度に応じてスケーラブルに使えます。この記事を参考に、hooks_riverpodをマスターし、Flutter開発をさらに効率的に行いましょう。

]]> https://techgrowup.net/flutter-hooks-riverpod/feed/ 0