feat: add CustomMaterialIndicator widget

Author: gonuit

example/lib/indicators/check_mark_indicator.dart

@@ -55,15 +55,11 @@ class _CheckMarkIndicatorState extends State<CheckMarkIndicator> with SingleTick
       onStateChanged: (change) {
         /// set [_renderCompleteState] to true when controller.state become completed
         if (change.didChange(to: IndicatorState.complete)) {
-          setState(() {
-            _renderCompleteState = true;
-          });
+          _renderCompleteState = true;
 
           /// set [_renderCompleteState] to false when controller.state become idle
         } else if (change.didChange(to: IndicatorState.idle)) {
-          setState(() {
-            _renderCompleteState = false;
-          });
+          _renderCompleteState = false;
         }
       },
       builder: MaterialIndicatorDelegate(

example/lib/screens/example_indicator_screen.dart

@@ -12,25 +12,21 @@ class ExampleIndicatorScreen extends StatelessWidget {
       backgroundColor: appBackgroundColor,
       appBar: const ExampleAppBar(),
       body: SafeArea(
-        child: CustomRefreshIndicator(
-          leadingScrollIndicatorVisible: false,
-          trailingScrollIndicatorVisible: false,
-          builder: MaterialIndicatorDelegate(
-            builder: (context, controller) {
-              return Icon(
-                Icons.ac_unit,
-                color: Theme.of(context).colorScheme.primary,
-                size: 30,
-              );
-            },
-            scrollableBuilder: (context, child, controller) {
-              return Opacity(
-                opacity: 1.0 - controller.value.clamp(0.0, 1.0),
-                child: child,
-              );
-            },
-          ).call,
+        child: CustomMaterialIndicator(
           onRefresh: () => Future.delayed(const Duration(seconds: 2)),
+          indicatorBuilder: (context, controller) {
+            return Icon(
+              Icons.ac_unit,
+              color: Theme.of(context).colorScheme.primary,
+              size: 30,
+            );
+          },
+          scrollableBuilder: (context, child, controller) {
+            return FadeTransition(
+              opacity: Tween(begin: 1.0, end: 0.0).animate(controller.clamp(0.0, 1.0)),
+              child: child,
+            );
+          },
           child: const ExampleList(itemCount: 6),
         ),
       ),

lib/custom_refresh_indicator.dart

@@ -1,4 +1,5 @@
 export 'src/data/data.dart';
 export 'src/custom_refresh_indicator.dart';
 export 'src/delegates/delegates.dart';
+export 'src/widgets/widgets.dart';
 export 'src/utils/utils.dart';

lib/src/custom_refresh_indicator.dart

@@ -107,6 +107,8 @@ class CustomRefreshIndicator extends StatefulWidget {
   final AsyncCallback onRefresh;
 
   /// Called on every indicator state change.
+  ///
+  /// There is no need to use setState in this function, as the indicator will be rebuilt automatically.
   final OnStateChanged? onStateChanged;
 
   /// The indicator controller stores all the data related
@@ -232,11 +234,11 @@ class CustomRefreshIndicatorState extends State<CustomRefreshIndicator> with Tic
     final onStateChanged = widget.onStateChanged;
     if (onStateChanged != null && controller.state != newState) {
       onStateChanged(IndicatorStateChange(controller.state, newState));
-      // Triggers a rebuild of the widget to ensure that the new state
-      // will be handled correctly by the indicator widget.
-      _update();
     }
     controller.setIndicatorState(newState);
+    // Triggers a rebuild of the widget to ensure that the new state
+    // will be handled correctly by the indicator widget.
+    _update();
   }
 
   /// Notifies the listeners of the controller

lib/src/delegates/indicator_builder_delegate.dart

@@ -2,6 +2,11 @@ import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
 import 'package:flutter/widgets.dart';
 
 /// An abstract class for defining indicator delegates.
+@Deprecated(
+  'Indicator delegates are deprecated and will be removed in the upcoming release. '
+  'If you want to exapose some pre-built functionality wrap the CustomRefreshIndicator widget '
+  'with your custom implementation.',
+)
 abstract class IndicatorBuilderDelegate {
   const IndicatorBuilderDelegate();
 

lib/src/delegates/material_indicator_delegate.dart

@@ -1,13 +1,8 @@
 import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
 import 'package:flutter/material.dart';
-import 'dart:math' as math;
-
-typedef MaterialIndicatorBuilder = Widget Function(
-  BuildContext context,
-  IndicatorController controller,
-);
 
 /// Builds a container that behaves similarly to the material refresh indicator
+@Deprecated('In favor of CustomMaterialIndicator widget.')
 class MaterialIndicatorDelegate extends IndicatorBuilderDelegate {
   /// The distance from the child's top or bottom [edgeOffset] where
   /// the refresh indicator will settle. During the drag that exposes the refresh
@@ -84,6 +79,7 @@ class MaterialIndicatorDelegate extends IndicatorBuilderDelegate {
         Theme.of(context).canvasColor;
 
     return Stack(
+      clipBehavior: Clip.hardEdge,
       children: <Widget>[
         scrollableBuilder(context, child, controller),
         _PositionedIndicatorContainer(
@@ -165,7 +161,7 @@ class _PositionedIndicatorContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (controller.side.isNone) return const SizedBox();
+    if (controller.side.isNone) return const SizedBox.shrink();
 
     final isVerticalAxis = controller.side.isTop || controller.side.isBottom;
     final isHorizontalAxis = controller.side.isLeft || controller.side.isRight;
@@ -174,8 +170,6 @@ class _PositionedIndicatorContainer extends StatelessWidget {
         ? AlignmentDirectional(-1.0, controller.side.isTop ? 1.0 : -1.0)
         : AlignmentDirectional(controller.side.isLeft ? 1.0 : -1.0, -1.0);
 
-    final double value = controller.isFinalizing ? 1.0 : controller.value;
-
     return Positioned(
       top: isHorizontalAxis
           ? 0
@@ -197,15 +191,20 @@ class _PositionedIndicatorContainer extends StatelessWidget {
           : controller.side.isRight
               ? edgeOffset
               : null,
-      child: ClipRRect(
-        child: Align(
-          alignment: alignment,
-          heightFactor: isVerticalAxis ? math.max(value, 0.0) : null,
-          widthFactor: isHorizontalAxis ? math.max(value, 0.0) : null,
-          child: Container(
+      child: Align(
+        alignment: alignment,
+        heightFactor: isVerticalAxis ? 0.0 : null,
+        widthFactor: isHorizontalAxis ? 0.0 : null,
+        child: SlideTransition(
+          position: controller.isFinalizing
+              ? const AlwaysStoppedAnimation(Offset(0.0, 1.0))
+              : Tween(begin: const Offset(0.0, 0.0), end: const Offset(0.0, 1.0)).animate(controller),
+          child: Padding(
             padding: _getEdgeInsets(controller.side),
-            alignment: _getAlignement(controller.side),
-            child: child,
+            child: Align(
+              alignment: _getAlignement(controller.side),
+              child: child,
+            ),
           ),
         ),
       ),