feat: add MultiReactionBuilder widget

flutter_mobx/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.1.0
+
+- feat: add `MultiReactionBuilder` widget by [@amondnet](https://github.com/amondnet)
+
 ## 2.0.6+3 - 2.0.6+5
 
 - Moved the version into its own file (`version.dart`) and exported from the main library file

flutter_mobx/lib/src/multi_reaction_builder.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_mobx/src/reaction_builder.dart';
+import 'package:provider/provider.dart';
+
+/// {@template multi_reaction_builder}
+/// Merges multiple [ReactionBuilder] widgets into one widget tree.
+///
+/// [MultiReactionBuilder] improves the readability and eliminates the need
+/// to nest multiple [ReactionBuilder]s.
+///
+/// By using [MultiReactionBuilder] we can go from:
+///
+/// ```dart
+/// ReactionBuilder(
+///   builder: (context) {},
+///   child: ReactionBuilder(
+///     builder: (context) {},
+///     child: ReactionBuilder(
+///       builder: (context) {},
+///       child: ChildA(),
+///     ),
+///   ),
+/// )
+/// ```
+///
+/// to:
+///
+/// ```dart
+/// MultiReactionBuilder(
+///   builders: [
+///     ReactionBuilder(
+///       builder: (context) {},
+///     ),
+///     ReactionBuilder(
+///       builder: (context) {},
+///     ),
+///     ReactionBuilder(
+///       builder: (context) {},
+///     ),
+///   ],
+///   child: ChildA(),
+/// )
+/// ```
+///
+/// [MultiReactionBuilder] converts the [ReactionBuilder] list into a tree of nested
+/// [ReactionBuilder] widgets.
+/// As a result, the only advantage of using [MultiReactionBuilder] is improved
+/// readability due to the reduction in nesting and boilerplate.
+/// {@endtemplate}
+class MultiReactionBuilder extends MultiProvider {
+  /// {@macro multi_reaction_builder}
+  MultiReactionBuilder({
+    Key? key,
+    required List<ReactionBuilder> builders,
+    required Widget child,
+  }) : super(key: key, providers: builders, child: child);
+}

flutter_mobx/lib/src/reaction_builder.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:mobx/mobx.dart';
+import 'package:provider/single_child_widget.dart';
 
 /// A builder function that creates a reaction
 typedef ReactionBuilderFunction = ReactionDisposer Function(
@@ -16,19 +17,22 @@ typedef ReactionBuilderFunction = ReactionDisposer Function(
 /// [builder] that takes in a [BuildContext] and prepares the reaction. It should
 /// end up returning a [ReactionDisposer]. This will be disposed when the [ReactionBuilder]
 /// is disposed. The [child] Widget gets rendered as part of the build process.
-class ReactionBuilder extends StatefulWidget {
+class ReactionBuilder extends SingleChildStatefulWidget {
   final ReactionBuilderFunction builder;
-  final Widget child;
 
-  const ReactionBuilder({Key? key, required this.child, required this.builder})
+  /// The widget which will be rendered as a descendant of the
+  /// [ReactionBuilder]
+  final Widget? child;
+
+  const ReactionBuilder({Key? key, this.child, required this.builder})
       : super(key: key);
 
   @override
   ReactionBuilderState createState() => ReactionBuilderState();
 }
 
 @visibleForTesting
-class ReactionBuilderState extends State<ReactionBuilder> {
+class ReactionBuilderState extends SingleChildState<ReactionBuilder> {
   late ReactionDisposer _disposeReaction;
 
   bool get isDisposed => _disposeReaction.reaction.isDisposed;
@@ -40,14 +44,19 @@ class ReactionBuilderState extends State<ReactionBuilder> {
     _disposeReaction = widget.builder(context);
   }
 
-  @override
-  Widget build(BuildContext context) {
-    return widget.child;
-  }
-
   @override
   void dispose() {
     _disposeReaction();
     super.dispose();
   }
+
+  @override
+  Widget buildWithChild(BuildContext context, Widget? child) {
+    assert(
+      child != null,
+      '''${widget.runtimeType} used outside of MultiReactionBuilder must specify a child''',
+    );
+
+    return child!;
+  }
 }

flutter_mobx/pubspec.yaml

@@ -2,7 +2,7 @@ name: flutter_mobx
 description:
   Flutter integration for MobX. It provides a set of Observer widgets that automatically rebuild
   when the tracked observables change.
-version: 2.0.6+5
+version: 2.1.0
 
 homepage: https://github.com/mobxjs/mobx.dart
 issue_tracker: https://github.com/mobxjs/mobx.dart/issues
@@ -14,6 +14,7 @@ dependencies:
   flutter:
     sdk: flutter
   mobx: ^2.0.6
+  provider: ^6.0.0
 
 dev_dependencies:
   build_runner: ^2.0.6

flutter_mobx/test/multi_reaction_builder_test.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_mobx/src/multi_reaction_builder.dart';
+import 'package:flutter_mobx/src/reaction_builder.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mobx/mobx.dart';
+
+class Counter {
+  Counter();
+
+  Observable<int> state = Observable(0);
+
+  void increment() => runInAction(() => state.value = state.value + 1);
+}
+
+void main() {
+  group('MultiReactionBuilder', () {
+    testWidgets('calls reactions on state changes', (tester) async {
+      final statesA = <int>[];
+      const expectedStatesA = [1, 2];
+      final counterA = Counter();
+
+      final statesB = <int>[];
+      final expectedStatesB = [1];
+      final counterB = Counter();
+
+      await tester.pumpWidget(
+        MultiReactionBuilder(
+          builders: [
+            ReactionBuilder(
+              builder: (context) => reaction(
+                (_) => counterA.state.value,
+                (int state) => statesA.add(state),
+              ),
+            ),
+            ReactionBuilder(
+              builder: (context) => reaction(
+                (_) => counterB.state.value,
+                (int state) => statesB.add(state),
+              ),
+            ),
+          ],
+          child: const SizedBox(key: Key('multiListener_child')),
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byKey(const Key('multiListener_child')), findsOneWidget);
+
+      counterA.increment();
+      await tester.pump();
+      counterA.increment();
+      await tester.pump();
+      counterB.increment();
+      await tester.pump();
+
+      expect(statesA, expectedStatesA);
+      expect(statesB, expectedStatesB);
+    });
+  });
+}