Flutter Hooks_Riverpodを使って、初期カウンターアプリの保存と読み込みをしてみる

初期に設定されているFlutterカウンターアプリをhooks_riverpodで書き換えてSharedPreferencesでカウントした数字をシュミレーターのローカルストレージに保存して取り出してみました。

こちらのサンプルコードに詳細も乗せてあります。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';

final countProvider =
    StateNotifierProvider<countState, Counter>((ref) => countState());

class countState extends StateNotifier<Counter> {
  countState() : super(const Counter());

  void countUp() async {
    // Shared preferencesのインスタンスを非同期で取得しprefsに入れる。
    final prefs = await SharedPreferences.getInstance();
    // Counterクラスのcountに取得したデータを入れる　初期時はnull
    state = Counter(count: (prefs.getInt(countPrefsKey) ?? 0) + 1);
    // setIntで(キーの,内容を)保存
    prefs.setInt(countPrefsKey, state.count);
  }
}

// SharedPreferences で使用する記憶用のキー
const countPrefsKey = 'counter';

// カウンタークラス　初期時は0
@immutable
class Counter {
  const Counter({this.count = 0});
  final int count;
}

class CountView extends HookConsumerWidget {
  const CountView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(countProvider);
    final provider = ref.read((countProvider.notifier));
    // providerで取得してきたCounterのcountを初期値として設定
    final counter = useState(state.count);

    // シュミレーターをリセットかけても読み込むようにするメソッド
    Future loadCounter() async {
      final prefs = await SharedPreferences.getInstance();
      final loadCounter = Counter(count: prefs.getInt(countPrefsKey) ?? 0);
      return counter.value = loadCounter.count;
    }

    // シュミレーターのデバイスにセーブしてあるデータを消去
    Future deleteCounter() async {
      final prefs = await SharedPreferences.getInstance();
      prefs.remove(countPrefsKey);
      loadCounter();
    }

    // 状態管理で常に保存状況を読み込む
    useEffect(() {
      Future.microtask(() async {
        await loadCounter();
      });
      return;
    });

    return Scaffold(
      appBar: AppBar(title: Text('カウントデータの保存')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: deleteCounter,
              child: const Text('カウンターをリセット'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: provider.countUp,
        child: const Icon(Icons.add),
      ),
    );
  }
}