feat: Remove provider dependency (#92)

The `StrokeOrderAnimator` now uses a `ListenableBuilder` to directly listen to the `StrokeOrderAnimationController`. This removes the need for a `ChangeNotifierProvider` and `Consumer`.
chill-chinese · Jun 7, 2024 · 8384441 · 8384441
1 parent 36f6c41
commit 8384441
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 215 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:http/http.dart' as http;
-import 'package:provider/provider.dart';
 import 'package:stroke_order_animator/stroke_order_animator.dart';
 
 void main() {
@@ -29,18 +28,21 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
   final _httpClient = http.Client();
   final _textController = TextEditingController();
 
+  StrokeOrderAnimationController? _completedController;
   late Future<StrokeOrderAnimationController> _animationController;
 
   @override
   void initState() {
     super.initState();
 
     _animationController = _loadStrokeOrder('永');
+    _animationController.then((a) => _completedController = a);
   }
 
   @override
   void dispose() {
     _httpClient.close();
+    _completedController?.dispose();
     super.dispose();
   }
 
@@ -129,6 +131,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
 
     setState(() {
       _animationController = _loadStrokeOrder(_textController.text);
+      _animationController.then((a) => _completedController = a);
     });
   }
 
@@ -160,111 +163,94 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
   }
 
   Widget _buildStrokeOrderAnimation(StrokeOrderAnimationController controller) {
-    return ChangeNotifierProvider<StrokeOrderAnimationController>.value(
-      value: controller,
-      child: Consumer<StrokeOrderAnimationController>(
-        builder: (context, controller, child) {
-          return StrokeOrderAnimator(
-            controller,
-            size: Size(300, 300),
-            key: UniqueKey(),
-          );
-        },
-      ),
+    return StrokeOrderAnimator(
+      controller,
+      size: Size(300, 300),
+      key: UniqueKey(),
     );
   }
 
   Widget _buildAnimationControls(StrokeOrderAnimationController controller) {
-    return ChangeNotifierProvider.value(
-      value: controller,
-      builder: (context, child) => Consumer<StrokeOrderAnimationController>(
-        builder: (context, controller, child) => Flexible(
-          child: GridView(
-            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-              childAspectRatio: 3,
-              crossAxisCount: 2,
-              mainAxisSpacing: 10,
-            ),
-            primary: false,
-            children: <Widget>[
-              MaterialButton(
-                onPressed: controller.isQuizzing
-                    ? null
-                    : (controller.isAnimating
-                        ? controller.stopAnimation
-                        : controller.startAnimation),
-                child: controller.isAnimating
-                    ? Text('Stop animation')
-                    : Text('Start animation'),
-              ),
-              MaterialButton(
-                onPressed: controller.isQuizzing
-                    ? controller.stopQuiz
-                    : controller.startQuiz,
-                child: controller.isQuizzing
-                    ? Text('Stop quiz')
-                    : Text('Start quiz'),
-              ),
-              MaterialButton(
-                onPressed: controller.isQuizzing ? null : controller.nextStroke,
-                child: Text('Next stroke'),
-              ),
-              MaterialButton(
-                onPressed:
-                    controller.isQuizzing ? null : controller.previousStroke,
-                child: Text('Previous stroke'),
-              ),
-              MaterialButton(
-                onPressed:
-                    controller.isQuizzing ? null : controller.showFullCharacter,
-                child: Text('Show full character'),
-              ),
-              MaterialButton(
-                onPressed: controller.reset,
-                child: Text('Reset'),
-              ),
-              MaterialButton(
-                onPressed: () {
-                  controller.setShowOutline(!controller.showOutline);
-                },
-                child: controller.showOutline
-                    ? Text('Hide outline')
-                    : Text('Show Outline'),
-              ),
-              MaterialButton(
-                onPressed: () {
-                  controller.setShowBackground(!controller.showBackground);
-                },
-                child: controller.showUserStroke
-                    ? Text('Hide background')
-                    : Text('Show background'),
-              ),
-              MaterialButton(
-                onPressed: () {
-                  controller.setShowMedian(!controller.showMedian);
-                },
-                child: controller.showMedian
-                    ? Text('Hide medians')
-                    : Text('Show medians'),
-              ),
-              MaterialButton(
-                onPressed: () {
-                  controller.setHighlightRadical(!controller.highlightRadical);
-                },
-                child: controller.highlightRadical
-                    ? Text('Unhighlight radical')
-                    : Text('Highlight radical'),
-              ),
-              MaterialButton(
-                onPressed: () {
-                  controller.setShowUserStroke(!controller.showUserStroke);
-                },
-                child: controller.showUserStroke
-                    ? Text('Hide user strokes')
-                    : Text('Show user strokes'),
-              ),
-            ],
+    return ListenableBuilder(
+      listenable: controller,
+      builder: (context, child) => Flexible(
+        child: GridView(
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            childAspectRatio: 3,
+            crossAxisCount: 2,
+            mainAxisSpacing: 10,
           ),
+          primary: false,
+          children: <Widget>[
+            MaterialButton(
+              onPressed: controller.isQuizzing
+                  ? null
+                  : (controller.isAnimating
+                      ? controller.stopAnimation
+                      : controller.startAnimation),
+              child: controller.isAnimating
+                  ? Text('Stop animation')
+                  : Text('Start animation'),
+            ),
+            MaterialButton(
+              onPressed: controller.isQuizzing
+                  ? controller.stopQuiz
+                  : controller.startQuiz,
+              child: controller.isQuizzing
+                  ? Text('Stop quiz')
+                  : Text('Start quiz'),
+            ),
+            MaterialButton(
+              onPressed: controller.isQuizzing ? null : controller.nextStroke,
+              child: Text('Next stroke'),
+            ),
+            MaterialButton(
+              onPressed:
+                  controller.isQuizzing ? null : controller.previousStroke,
+              child: Text('Previous stroke'),
+            ),
+            MaterialButton(
+              onPressed:
+                  controller.isQuizzing ? null : controller.showFullCharacter,
+              child: Text('Show full character'),
+            ),
+            MaterialButton(
+              onPressed: controller.reset,
+              child: Text('Reset'),
+            ),
+            MaterialButton(
+              onPressed: () {
+                controller.setShowOutline(!controller.showOutline);
+              },
+              child: controller.showOutline
+                  ? Text('Hide outline')
+                  : Text('Show Outline'),
+            ),
+            MaterialButton(
+              onPressed: () {
+                controller.setShowMedian(!controller.showMedian);
+              },
+              child: controller.showMedian
+                  ? Text('Hide medians')
+                  : Text('Show medians'),
+            ),
+            MaterialButton(
+              onPressed: () {
+                controller.setHighlightRadical(!controller.highlightRadical);
+              },
+              child: controller.highlightRadical
+                  ? Text('Unhighlight radical')
+                  : Text('Highlight radical'),
+            ),
+            MaterialButton(
+              onPressed: () {
+                controller.setShowUserStroke(!controller.showUserStroke);
+              },
+              child: controller.showUserStroke
+                  ? Text('Hide user strokes')
+                  : Text('Show user strokes'),
+            ),
+          ],
         ),
       ),
     );

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -160,14 +160,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.12.0"
-  nested:
-    dependency: transitive
-    description:
-      name: nested
-      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.0"
   path:
     dependency: transitive
     description:
@@ -176,14 +168,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.0"
-  provider:
-    dependency: transitive
-    description:
-      name: provider
-      sha256: c8a055ee5ce3fd98d6fc872478b03823ffdb448699c6ebdbbc71d59b596fd48c
-      url: "https://pub.dev"
-    source: hosted
-    version: "6.1.2"
   sky_engine:
     dependency: transitive
     description: flutter

diff --git a/lib/src/stroke_order_animation_controller.dart b/lib/src/stroke_order_animation_controller.dart
@@ -7,7 +7,7 @@ import 'package:stroke_order_animator/stroke_order_animator.dart';
 ///
 /// It must be passed as an argument to a [StrokeOrderAnimator] that handles
 /// the actual presentation of the diagram.
-/// It can additionally be consumed by an app to allow for
+/// It can additionally be consumed by a [ListenableBuilder] to allow for
 /// synchronization of control buttons with the animations.
 /// In order to control animations, a [TickerProvider] must be passed to the
 /// controller, for example using a [TickerProviderStateMixin].
@@ -34,6 +34,8 @@ import 'package:stroke_order_animator/stroke_order_animator.dart';
 /// * Show next/previous stroke
 /// * Show full character
 /// * Reset animation/quiz
+///
+/// Don't forget to call [dispose] when the controller is no longer needed.
 class StrokeOrderAnimationController extends ChangeNotifier {
   /// Creates a new [StrokeOrderAnimationController].
   ///
@@ -56,6 +58,8 @@ class StrokeOrderAnimationController extends ChangeNotifier {
   /// * Brush thickness in quiz mode
   /// * Number of wrong strokes before showing a hint in quiz mode
   /// * Hint color in quiz mode
+  ///
+  /// Don't forget to call [dispose] when the controller is no longer needed.
   StrokeOrderAnimationController(
     this._strokeOrder,
     TickerProvider tickerProvider, {