【Flutter】複数のChangeNotifierをまとめることができるfreezed（のようなもの）を作った

こんにちは。広瀬マサルです。

あまり需要はないかもしれませんが

私的に必要だったので新しいFlutterパッケージを作りました。

一言で簡単に言うと

**複数のChangeNotifierを１つにまとめることができる[freezed](https://pub.dev/packages/freezed)（のようなもの）**

です。

使い方をまとめたので興味ある方はぜひ使ってみてください！

# katana_listenables

https://pub.dev/packages/katana_listenables

https://pub.dev/packages/katana_listenables_builder

# はじめに

複数のTextEditingControllerやValueNotifierなど、Widgetを作成する際にこれらのChangeNotifierを継承したコントローラーなどの管理を行いたい場合があります。

その時大体は下記のようになるかと思います。

- State<StatefulWidget>内で複数のChangeNotifierを継承したクラスを定義し、すべてに対してaddListenerを行う
    - setState()を実行するためのメソッドを別途作る必要もあり
- 状態管理パッケージで利用するためのChangeNotifierを継承したクラスを作り、すべてに対してaddListenerを行う

上記の実装を簡略化したいと思い下記のようなパッケージを作りました。

- 簡単な記述でChageNotofierを継承したクラスを作成
- パラメーターにChageNotofierを継承したオブジェクトを渡すことでそのパラメーターを監視する
    - 監視しているChageNotifierに変更が発生した場合、自身のオブジェクトにも変更が伝搬される

例えば下記のような記述を行ないます。

```dart
@listenables
class ControllerGroup with _$ControllerGroup, ChangeNotifier {
  factory ControllerGroup({
    required TextEditingController emailTextEditingController,
    required TextEditingController passwordTextEditingController,
    required FocusNode focusNode,
    ValueNotifier<bool> checkTerms,
  }) = _ControllerGroup;
}
```

これで[build_runner](https://pub.dev/packages/build_runner)を走らせると引数に与えられたChangeNotifier（Listenable）を継承したクラスが自動生成されます。

これを例えば[riverpod](https://pub.dev/packages/riverpod)で下記のように読み込むと…

```dart
final controllerProvider = ChangeNotifierProvider((_) {
  return ControllerGroup(
    emailTextEditingController: TextEdigingController(),
    passwordTextEditingController: TextEdigingController(),
    focusNode: FocusNode(),
    checkTerms: ValueNotifier(false),
  );
});

class TestPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref){
    final controller = ref.watch(controllerProvider);

    ~~~~
    controller.emailTextEditingController.text = "New Text"; // この時controllerにも変更が通知されてウィジェットの再更新が走る。
    ~~~~
  }
}
```

`controller`の中で定義している`emailTextEditingController`の中身が更新されるとその変更通知が`controller`にも伝搬されます。

controllerもChangeNotifierなので、`addListener`などで変更を監視することができます。

# インストール

[build_runner](https://pub.dev/packages/build_runner)を用いたコードジェネレーションを行うため下記のパッケージをインポートします。

```dart
flutter pub add katana_listenables
flutter pub add --dev build_runner
flutter pub add --dev katana_listenables_builder
```

# 実装

## クラス作成

下記のようにクラスを作成します。

`part ‘(ファイル名).listenable.dart’;`を追加します。

定義したクラスに`@listenables`のアノテーションを付与し `_$(定義したクラス名)`と`ChangeNotifier`をmixinします。

コンストラクタは`factory`で作成しパラメーターで使用したいChangeNotifierやListenableを継承したクラスを定義します。

（必須な値は`required`を付与します。requiredを付与しない場合はそのまま記述してください）

コンストラクタの後に `= _(定義したクラス名)`を記述します。

```dart
// controller.dart

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

part 'controller.listenable.dart';

@listenables
class ControllerGroup with _$ControllerGroup, ChangeNotifier {
  factory ControllerGroup({
    required TextEditingController emailTextEditingController,
    required TextEditingController passwordTextEditingController,
    required FocusNode focusNode,
    ValueNotifier<bool> checkTerms,
  }) = _ControllerGroup;
}
```

# コードジェネレーション

下記のコマンドを入力することで自動でコード生成を行います。

```bash
flutter pub run build_runner build --delete-conflicting-outputs
```

# 利用方法

作成したクラスがChangeNotifierを継承したクラスになるので一般的なChangeNotifierと同じような使い方が可能です。

- State<StatefulWidget>の場合

```dart
class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState => TestPageState();
}

class TestPageState extends State<TestPage> {
  final controller = ControllerGroup(
    emailTextEditingController: TextEdigingController(),
    passwordTextEditingController: TextEdigingController(),
    focusNode: FocusNode(),
    checkTerms: ValueNotifier(false),
  );

  @override
  void initState(){
    super.initState();
    controller.addListener(_handledOnUpdate);
  }
	
  void _handledOnUpdate(){
    setState((){});
  }

  @override
  void dispose(){
    super.dispose();
    controller.removeListener(_handledOnUpdate);
    controller.dispose();
  }

  @override
  Widget build(BuildContext context, WidgetRef ref){
    final controller = ref.watch(controllerProvider);

    ~~~~
    controller.emailTextEditingController.text = "New Text"; // この時controllerにも変更が通知されてウィジェットの再更新が走る。
    ~~~~
  }
}
```

- riverpodの場合

```dart
final controllerProvider = ChangeNotifierProvider((_) {
  return ControllerGroup(
    emailTextEditingController: TextEdigingController(),
    passwordTextEditingController: TextEdigingController(),
    focusNode: FocusNode(),
    checkTerms: ValueNotifier(false),
  );
});

class TestPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref){
    final controller = ref.watch(controllerProvider);

    ~~~~
    controller.emailTextEditingController.text = "New Text"; // この時controllerにも変更が通知されてウィジェットの再更新が走る。
    ~~~~
	}
}
```

# 応用した使い方

## メソッドの追加

メソッドを追加する場合は下記の書き方になります。

`(定義したクラス名)._();`のコンストラクタを追加する必要があります。

```dart
// controller.dart

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

part 'controller.listenable.dart';

@listenables
class ControllerGroup with _$ControllerGroup, ChangeNotifier {
  factory ControllerGroup({
    required TextEditingController emailTextEditingController,
    required TextEditingController passwordTextEditingController,
    required FocusNode focusNode,
    ValueNotifier<bool> checkTerms,
  }) = _ControllerGroup;
  ControllerGroup._(); // 追加必須

  bool checked {
    return checkTerms?.value ?? false;
  }
}
```

# おわりに

自分で使う用途で作ったものですが実装の思想的に合ってそうならぜひぜひ使ってみてください！

また、[こちら](https://github.com/mathrunet/flutter_masamune)にソースを公開しているのでissueやPullRequestをお待ちしてます！

また仕事の依頼等ございましたら、私の[Twitter](https://twitter.com/mathru)や[Webサイト](https://mathru.net)で直接ご連絡をお願いいたします！

https://mathru.net/ja/contact

# GitHub Sponsors

スポンサーを随時募集してます。ご支援お待ちしております！

https://github.com/sponsors/mathrunet