【Flutter×Riverpod】.autoDisposeの使い方｜プロバイダ修飾子を理解する

今回はRiverpodのプロバイダ修飾子「.autoDispose」の使い方を紹介します。

プロバイダ修飾子「.autoDispose」とは？

プロバイダ作成時にプロバイダ修飾子（Modifier）「.autoDispose」を使用することで、ユーザーが別のスクリーンに遷移して戻ってくる際、ステートを破棄してプロバイダの値をリセットできます。

よって、参照しなくなったFirebaseサービスとの接続を切って不必要な負荷を避けたり、カウンターアプリなどで画面遷移する度に値（ステート）をリセットしたりできます。

カウンターアプリ：画面遷移あり ＆ .autoDisposeなし

//.autoDisposeなし
final counterProvider = StateProvider((ref) => 0);

このカウンターアプリでは「Home」と「Counter」２つの画面で構成されており、カウンターの初期値０（ステート）はcounterProvider（StateProvider）で管理されています。

よってイベントクリックをした後「Home」に遷移し再度「Counter」画面に戻ってもカウンターの値はリセットされません。そんな時「.autoDispose」を使えば問題解決です！

.autoDisposeでプロバイダを定義

//.autoDisposeあり
final counterProvider = StateProvider.autoDispose((ref) => 0);

上記コードのように使用するプロバイダを定義する際、使用するプロバイダの後に「.autoDispose」を追加します。これで画面遷移する度にプロバイダのステートを破棄（リセット）できます。

//ソース
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider.autoDispose((ref) => 0);

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        routes: {
          '/': (context) => const Home(),
          '/counter': (context) => Counter(),
        },
      ),
    ),
  );
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text(
            'Go',
            style: TextStyle(
              fontSize: 40,
            ),
          ),
          onPressed: () {
            Navigator.pushNamed(context, '/counter');
          },
        ),
      ),
    );
  }
}

class Counter extends ConsumerStatefulWidget {
  const Counter({Key? key}) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _CounterState();
}

class _CounterState extends ConsumerState<Counter> {
  @override
  Widget build(BuildContext context) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text(
          counter.toString(),
          style: TextStyle(
            fontSize: 50,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          ref.read(counterProvider.notifier).state++;
        },
      ),
    );
  }
}

以上です。

参考

Riverpod：.autoDispose