ReArchを使ってみる

ReArchを使ってみる

皆さん、Riverpodを使ってますか。
自分は、どうしても慣れずに挫折しました。
そこで、別のアプローチを模索したところ、ReArchを見付けたので試してみました。

ReArchを導入

以下のコマンドを実行

flutter pub add rearch flutter_rearch

実装

細かいところは、端折りますが、動作確認はしています。

• AppをRearchBootstrapperから呼び出すようにする。

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

import 'app.dart';

void main() {
  runApp(RearchBootstrapper(child: const App()));
}

• こちらは、特に変更点はありません。

import 'package:flutter/material.dart';

import 'home_page.dart';

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• カウンターをCapsuleで実装します。setCountで動作を実装して、countを参照するようにします。

import 'package:rearch/rearch.dart';

final Capsule<(int, void Function())> countManager = capsule((CapsuleHandle use) {
  final (count, incrementCount) = use.state(0);
  return (count, () => incrementCount(count + 1));
});

• RearchConsumerを継承して、WidgetHandle useをbuildに追加します。

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

import 'count_manager.dart';

class HomePage extends RearchConsumer {
  const HomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context, WidgetHandle use) {
    final (count, incrementCount) = use(countManager);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$count',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCount,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

• カプセルで作成した内容を呼び出します。

final (count, incrementCount) = use(countManager);

以上で、カウンターアプリをReArchで実装出来ました。

Riverpodだと、アノテーションだったり、戻り値のValueが複数あって何を選んだらいいかだったり、build_runnerしないといけなかったり、慣れれば楽だと思いますが、自分は慣れなかったです。
なので、自分の中ではかなり有力な候補になってますが、まだ触り始めたばかりなので、知識を深めたいと思います。