Add autoRebuild argument

Author: Kamil Klyta

CHANGELOG.md

@@ -1,10 +1,11 @@
 ## 2.0.0-dev.4
 ## Breaking changes
+- Added `autoRebuild` flag which is by default set to `true`.
+  From now on, there is no need to wrap widgets in the builder function with the `AnimatedBuilder` widget, as it will be automatically rebuilt. For optimization purposes, you can use the old behavior by setting the `autoRebuild` argument to false.
 - Renamed `extentPercentageToArmed` argument to `containerExtentPercentageToArmed` which better describes what it exactly does.
 - Changed the default value of the `defaultContainerExtentPercentageToArmed` from `0.20` to `0.1(6)` to match the behavior of the built-in indicator widget.
 - Removed deprecated **IndicatorStateHelper** class. Instead use **CustomRefreshIndicator.onStateChanged** method.
 - Removed deprecated **leadingGlowVisible** and **trailingGlowVisible** arguments. Instead use **leadingScrollIndicatorVisible** and  **trailingScrollIndicatorVisible** accoringly.
-- The default value of the **trailingScrollIndicatorVisible** for the **EnvelopRefreshIndicator** has been changed from **true** to **false**.
 - Allow setting the edge of the list that will trigger the pull to refresh action.
   - Introduced **IndicatorEdge**, **IndicatorTrigger**, **IndicatorSide** and **IndicatorTriggerMode** classes.
   - Replaced **reversed** argument of the **CustomRefreshIndicator** class with **trigger**.
@@ -15,6 +16,7 @@
 - Now the *onRefresh* function will be triggered immediately when the indicator is released in the armed state. Previously, the *onRefresh* function was triggered when the indicator reached a target value in the loading state of `1.0`.
 - Fixed a bug causing the *onRefresh* method not to be triggered on the iOS platform due to bounce physics.
 - Implemented equality operator for *IndicatorStateChange* class.
+- Improved code coverage with tests
 - Multiple minor fixes, improvements and optimizations.
 ## 1.2.1
 - Flutter 3.0.0 migration backward compatibility fix ([#31](https://github.com/gonuit/flutter-custom-refresh-indicator/pull/31)) by [Jordan1122](https://github.com/Jordan1122)

README.md

@@ -14,14 +14,13 @@ A flutter package that allows you to easily create a custom refresh indicator wi
 ```dart
 CustomRefreshIndicator(
   /// Scrollable widget
-  child: ListView.separated(
-    itemBuilder: (BuildContext context, int index) => const SizedBox(
+  child: ListView.builder(
+    itemBuilder: (BuildContext context, int index) => Container(
+      child: Text(index.toString()),
       height: 100,
     ),
-    separatorBuilder: (BuildContext context, int index) =>
-        const SizedBox(height: 20),
   ),
-  /// Custom indicator builder function
+  /// The function that builds the indicator
   builder: (
     BuildContext context,
     Widget child,
@@ -30,13 +29,9 @@ CustomRefreshIndicator(
       /// TODO: Implement your own refresh indicator
       return Stack(
         children: <Widget>[
-          AnimatedBuilder(
-            animation: controller,
-            builder: (BuildContext context, _) {
-              /// This part will be rebuild on every controller change
-              return MyIndicator();
-            },
-          ),
+          /// Your indicator implementation
+          return MyIndicator(value: controller.value, loading: controller.state.isLoading);
+
           /// Scrollable widget that was provided as [child] argument
           ///
           /// TIP:
@@ -45,8 +40,8 @@ CustomRefreshIndicator(
         ],
       );
     }
-  /// A function that's called when the user has dragged the refresh indicator
-  /// far enough to demonstrate that they want the app to refresh.
+  /// A function that is called when the user drags the refresh indicator
+  /// far enough to show that they want to refresh the list.
   /// Should return [Future].
   onRefresh: myAsyncRefreshMethod,
 )

example/lib/indicators/envelope_indicator.dart

@@ -30,97 +30,92 @@ class EnvelopRefreshIndicator extends StatelessWidget {
       trailingScrollIndicatorVisible: trailingScrollIndicatorVisible,
       builder: (context, child, controller) =>
           LayoutBuilder(builder: (context, constraints) {
-        return AnimatedBuilder(
-            animation: controller,
-            builder: (context, _) {
-              final widgetWidth = constraints.maxWidth;
-              final widgetHeight = constraints.maxHeight;
-              final letterTopWidth = (widgetWidth / 2) + 50;
+        final widgetWidth = constraints.maxWidth;
+        final widgetHeight = constraints.maxHeight;
+        final letterTopWidth = (widgetWidth / 2) + 50;
 
-              final leftValue =
-                  (widgetWidth - (letterTopWidth * controller.value / 1))
-                      .clamp(letterTopWidth - 100, double.infinity);
+        final leftValue =
+            (widgetWidth - (letterTopWidth * controller.value / 1))
+                .clamp(letterTopWidth - 100, double.infinity);
 
-              final rightValue =
-                  (widgetWidth - (widgetWidth * controller.value / 1))
-                      .clamp(0.0, double.infinity);
+        final rightValue = (widgetWidth - (widgetWidth * controller.value / 1))
+            .clamp(0.0, double.infinity);
 
-              final opacity = (controller.value - 1).clamp(0, 0.5) / 0.5;
-              return Stack(
-                children: <Widget>[
-                  Transform.scale(
-                    scale: 1 - 0.1 * controller.value.clamp(0.0, 1.0),
-                    child: child,
-                  ),
-                  Positioned(
-                    right: rightValue,
-                    child: Container(
-                      height: widgetHeight,
-                      width: widgetWidth,
-                      decoration: const BoxDecoration(
-                        color: Colors.white,
-                        boxShadow: _defaultShadow,
-                      ),
-                    ),
-                  ),
-                  Positioned(
-                    left: leftValue,
-                    child: CustomPaint(
-                      painter: TrianglePainter(
-                        strokeColor: Colors.white,
-                        paintingStyle: PaintingStyle.fill,
-                      ),
-                      child: SizedBox(
-                        height: widgetHeight,
-                        width: letterTopWidth,
-                      ),
-                    ),
-                  ),
-                  if (controller.value >= 1)
-                    Container(
-                      padding: const EdgeInsets.only(right: 100),
-                      child: Transform.scale(
-                        scale: controller.value,
-                        child: Opacity(
-                          opacity: controller.isLoading ? 1 : opacity,
-                          child: Align(
-                            alignment: Alignment.center,
-                            child: Container(
-                              width: _circleSize,
-                              height: _circleSize,
-                              decoration: BoxDecoration(
-                                boxShadow: _defaultShadow,
-                                color: accent ??
-                                    Theme.of(context).colorScheme.primary,
-                                shape: BoxShape.circle,
-                              ),
-                              child: Stack(
-                                alignment: Alignment.center,
-                                children: <Widget>[
-                                  SizedBox(
-                                    height: double.infinity,
-                                    width: double.infinity,
-                                    child: CircularProgressIndicator(
-                                      valueColor: const AlwaysStoppedAnimation(
-                                          Colors.black),
-                                      value: controller.isLoading ? null : 0,
-                                    ),
-                                  ),
-                                  const Icon(
-                                    Icons.mail_outline,
-                                    color: Colors.white,
-                                    size: 35,
-                                  ),
-                                ],
+        final opacity = (controller.value - 1).clamp(0, 0.5) / 0.5;
+        return Stack(
+          children: <Widget>[
+            Transform.scale(
+              scale: 1 - 0.1 * controller.value.clamp(0.0, 1.0),
+              child: child,
+            ),
+            Positioned(
+              right: rightValue,
+              child: Container(
+                height: widgetHeight,
+                width: widgetWidth,
+                decoration: const BoxDecoration(
+                  color: Colors.white,
+                  boxShadow: _defaultShadow,
+                ),
+              ),
+            ),
+            Positioned(
+              left: leftValue,
+              child: CustomPaint(
+                painter: TrianglePainter(
+                  strokeColor: Colors.white,
+                  paintingStyle: PaintingStyle.fill,
+                ),
+                child: SizedBox(
+                  height: widgetHeight,
+                  width: letterTopWidth,
+                ),
+              ),
+            ),
+            if (controller.value >= 1)
+              Container(
+                padding: const EdgeInsets.only(right: 100),
+                child: Transform.scale(
+                  scale: controller.value,
+                  child: Opacity(
+                    opacity: controller.isLoading ? 1 : opacity,
+                    child: Align(
+                      alignment: Alignment.center,
+                      child: Container(
+                        width: _circleSize,
+                        height: _circleSize,
+                        decoration: BoxDecoration(
+                          boxShadow: _defaultShadow,
+                          color:
+                              accent ?? Theme.of(context).colorScheme.primary,
+                          shape: BoxShape.circle,
+                        ),
+                        child: Stack(
+                          alignment: Alignment.center,
+                          children: <Widget>[
+                            SizedBox(
+                              height: double.infinity,
+                              width: double.infinity,
+                              child: CircularProgressIndicator(
+                                valueColor:
+                                    const AlwaysStoppedAnimation(Colors.black),
+                                value: controller.isLoading ? null : 0,
                               ),
                             ),
-                          ),
+                            const Icon(
+                              Icons.mail_outline,
+                              color: Colors.white,
+                              size: 35,
+                            ),
+                          ],
                         ),
                       ),
-                    )
-                ],
-              );
-            });
+                    ),
+                  ),
+                ),
+              )
+          ],
+        );
       }),
       child: child,
       onRefresh: () => Future<void>.delayed(const Duration(seconds: 2)),

example/lib/indicators/ice_cream_indicator.dart

@@ -93,6 +93,7 @@ class _IceCreamIndicatorState extends State<IceCreamIndicator>
     return CustomRefreshIndicator(
       offsetToArmed: _indicatorSize,
       onRefresh: () => Future.delayed(const Duration(seconds: 4)),
+      autoRebuild: false,
       child: widget.child,
       builder: (
         BuildContext context,

example/lib/indicators/plane_indicator.dart

@@ -172,6 +172,7 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
         return CustomRefreshIndicator(
           offsetToArmed: _offsetToArmed,
           child: widget.child,
+          autoRebuild: false,
           onRefresh: () => Future.delayed(const Duration(seconds: 3)),
           builder: (BuildContext context, Widget child,
               IndicatorController controller) {

example/lib/indicators/simple_indicator.dart

@@ -72,13 +72,9 @@ final simpleIndicatorWithOpacity = CustomIndicatorConfig(
   builder: (context, child, controller) =>
       LayoutBuilder(builder: (context, constraints) {
     return Stack(children: <Widget>[
-      AnimatedBuilder(
+      Opacity(
+        opacity: 1.0 - controller.value.clamp(0.0, 1.0),
         child: child,
-        animation: controller,
-        builder: (context, child) => Opacity(
-          opacity: 1.0 - controller.value.clamp(0.0, 1.0),
-          child: child,
-        ),
       ),
       PositionedIndicatorContainer(
         constraints: constraints,

example/lib/indicators/test_indicator.dart

@@ -19,13 +19,9 @@ final testIndicator = CustomIndicatorConfig(
       width: double.infinity,
       color: Colors.red,
     ),
-    AnimatedBuilder(
+    Transform.translate(
+      offset: Offset(0, controller.value * 100),
       child: child,
-      animation: controller,
-      builder: (context, child) => Transform.translate(
-        offset: Offset(0, controller.value * 100),
-        child: child,
-      ),
     ),
   ]),
 );

example/lib/indicators/warp_indicator.dart

@@ -131,6 +131,7 @@ class _WarpIndicatorState extends State<WarpIndicator>
       leadingScrollIndicatorVisible: false,
       trailingScrollIndicatorVisible: false,
       onRefresh: widget.onRefresh,
+      autoRebuild: false,
       onStateChanged: (change) {
         if (change.didChange(to: IndicatorState.loading)) {
           _startShakeAnimation();

example/lib/screens/example_indicator_screen.dart

@@ -19,6 +19,7 @@ class ExampleIndicatorScreen extends StatelessWidget {
           leadingScrollIndicatorVisible: false,
           trailingScrollIndicatorVisible: false,
           offsetToArmed: 200.0,
+          autoRebuild: true,
           builder: customIndicator.builder,
           onRefresh: () => Future.delayed(const Duration(seconds: 2)),
           child: const ExampleList(

lib/src/custom_refresh_indicator.dart

@@ -134,15 +134,24 @@ class CustomRefreshIndicator extends StatefulWidget {
   /// Defaults to [IndicatorTriggerMode.onEdge].
   final IndicatorTriggerMode triggerMode;
 
+  /// When set to true, the [builder] function will be called whenever the controller changes.
+  /// It is set to `true` by default.
+  ///
+  /// This can be useful for optimizing performance in complex widgets.
+  /// When setting this to false, you can manage which part of the ui you want to rebuild,
+  /// such as using the AnimationBuilder widget.
+  final bool autoRebuild;
+
   const CustomRefreshIndicator({
     Key? key,
     required this.child,
     required this.onRefresh,
     required this.builder,
+    this.controller,
     this.trigger = IndicatorTrigger.startEdge,
     this.triggerMode = IndicatorTriggerMode.onEdge,
     this.notificationPredicate = defaultScrollNotificationPredicate,
-    this.controller,
+    this.autoRebuild = true,
     this.offsetToArmed,
     this.onStateChanged,
     double? containerExtentPercentageToArmed,
@@ -558,17 +567,26 @@ class CustomRefreshIndicatorState extends State<CustomRefreshIndicator>
 
   @override
   Widget build(BuildContext context) {
-    return widget.builder(
-      context,
-      NotificationListener<ScrollNotification>(
-        onNotification: _handleScrollNotification,
-        child: NotificationListener<OverscrollIndicatorNotification>(
-          onNotification: _handleScrollIndicatorNotification,
-          child: widget.child,
-        ),
+    final child = NotificationListener<ScrollNotification>(
+      onNotification: _handleScrollNotification,
+      child: NotificationListener<OverscrollIndicatorNotification>(
+        onNotification: _handleScrollIndicatorNotification,
+        child: widget.child,
       ),
-      controller,
     );
+
+    if (widget.autoRebuild) {
+      return AnimatedBuilder(
+        animation: controller,
+        builder: (context, _) => widget.builder(context, child, controller),
+      );
+    } else {
+      return widget.builder(
+        context,
+        child,
+        controller,
+      );
+    }
   }
 
   @override