Merge pull request #49 from gonuit/release/v3.0.0

v3.0.0

Author: gonuit

CHANGELOG.md

@@ -1,3 +1,17 @@
+## 3.0.0
+- **CustomRefreshIndicator**:
+  - Deprecated *indicatorFinalizeDuration*, *indicatorSettleDuration*, *indicatorCancelDuration* and *completeStateDuration* parameters in favor of *durations*.
+  - The indicator widget will now be rebuilt every time *state* changes, even if the *autoRebuilt* parameter is set to false. This will make managing the state of the indicator widget simpler.
+  - Deprecated *IndicatorDelegate* and *MaterialIndicatorDelegate* in favor of *CustomMaterialIndicator* widget.
+- **IndicatorController**:
+  - The controller now extends *Animation<double>*. This allows it to be used directly with *Transition* widgets to further improve animation performance.
+  - New *ClampedAnimation* class for constraining the *IndicatorController* animation value within a specific range using the *clamp* method.
+  - Drag interaction details are now available, enabling pointer-position-based animations.
+- **Example app**:
+  - The checkmark indicator example has been simplified.
+  - Minor corrections to the envelope indicator.
+  - Added image precaching.
+  - Removed unused code.
 ## 2.2.1
 - Fixed typos in documentation
 ## 2.2.0

README.md

@@ -2,120 +2,98 @@ import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
+class CheckMarkColors {
+  final Color content;
+  final Color background;
+
+  const CheckMarkColors({
+    required this.content,
+    required this.background,
+  });
+}
+
+class CheckMarkStyle {
+  final CheckMarkColors loading;
+  final CheckMarkColors completed;
+
+  const CheckMarkStyle({
+    required this.loading,
+    required this.completed,
+  });
+
+  static const defaultStyle = CheckMarkStyle(
+    loading: CheckMarkColors(content: Colors.white, background: Colors.black),
+    completed: CheckMarkColors(content: Colors.white, background: Colors.greenAccent),
+  );
+}
+
 class CheckMarkIndicator extends StatefulWidget {
   final Widget child;
+  final CheckMarkStyle style;
 
   const CheckMarkIndicator({
-    Key? key,
+    super.key,
     required this.child,
-  }) : super(key: key);
+    this.style = CheckMarkStyle.defaultStyle,
+  });
 
   @override
-  _CheckMarkIndicatorState createState() => _CheckMarkIndicatorState();
+  State<CheckMarkIndicator> createState() => _CheckMarkIndicatorState();
 }
 
-class _CheckMarkIndicatorState extends State<CheckMarkIndicator>
-    with SingleTickerProviderStateMixin {
-  static const _indicatorSize = 150.0;
-
+class _CheckMarkIndicatorState extends State<CheckMarkIndicator> with SingleTickerProviderStateMixin {
   /// Whether to render check mark instead of spinner
   bool _renderCompleteState = false;
 
   ScrollDirection prevScrollDirection = ScrollDirection.idle;
 
   @override
   Widget build(BuildContext context) {
-    return CustomRefreshIndicator(
-      offsetToArmed: _indicatorSize,
+    return CustomMaterialIndicator(
+      withRotation: false,
       onRefresh: () => Future.delayed(const Duration(seconds: 2)),
-      child: widget.child,
-      completeStateDuration: const Duration(seconds: 2),
+      durations: const RefreshIndicatorDurations(
+        completeDuration: Duration(seconds: 2),
+      ),
       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: (
+      indicatorBuilder: (
         BuildContext context,
-        Widget child,
         IndicatorController controller,
       ) {
-        return Stack(
-          children: <Widget>[
-            AnimatedBuilder(
-              animation: controller,
-              builder: (BuildContext context, Widget? _) {
-                if (controller.scrollingDirection == ScrollDirection.reverse &&
-                    prevScrollDirection == ScrollDirection.forward) {
-                  controller.stopDrag();
-                }
-
-                prevScrollDirection = controller.scrollingDirection;
-
-                final containerHeight = controller.value * _indicatorSize;
-
-                return Container(
-                  alignment: Alignment.center,
-                  height: containerHeight,
-                  child: OverflowBox(
-                    maxHeight: 40,
-                    minHeight: 40,
-                    maxWidth: 40,
-                    minWidth: 40,
-                    alignment: Alignment.center,
-                    child: AnimatedContainer(
-                      duration: const Duration(milliseconds: 150),
-                      alignment: Alignment.center,
-                      child: _renderCompleteState
-                          ? const Icon(
-                              Icons.check,
-                              color: Colors.white,
-                            )
-                          : SizedBox(
-                              height: 30,
-                              width: 30,
-                              child: CircularProgressIndicator(
-                                strokeWidth: 2,
-                                valueColor:
-                                    const AlwaysStoppedAnimation(Colors.white),
-                                value:
-                                    controller.isDragging || controller.isArmed
-                                        ? controller.value.clamp(0.0, 1.0)
-                                        : null,
-                              ),
-                            ),
-                      decoration: BoxDecoration(
-                        color: _renderCompleteState
-                            ? Colors.greenAccent
-                            : Colors.black,
-                        shape: BoxShape.circle,
-                      ),
-                    ),
+        final style = _renderCompleteState ? widget.style.completed : widget.style.loading;
+        return AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: style.background,
+            shape: BoxShape.circle,
+          ),
+          child: _renderCompleteState
+              ? const Icon(
+                  Icons.check,
+                  color: Colors.white,
+                )
+              : SizedBox(
+                  height: 24,
+                  width: 24,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                    color: style.content,
+                    value: controller.isDragging || controller.isArmed ? controller.value.clamp(0.0, 1.0) : null,
                   ),
-                );
-              },
-            ),
-            AnimatedBuilder(
-              builder: (context, _) {
-                return Transform.translate(
-                  offset: Offset(0.0, controller.value * _indicatorSize),
-                  child: child,
-                );
-              },
-              animation: controller,
-            ),
-          ],
+                ),
         );
       },
+      child: widget.child,
     );
   }
 }

example/lib/indicators/check_mark_indicator.dart

@@ -10,97 +10,93 @@ class EnvelopRefreshIndicator extends StatelessWidget {
 
   static const _circleSize = 70.0;
 
-  static const _defaultShadow = [
-    BoxShadow(blurRadius: 10, color: Colors.black26)
-  ];
+  static const _blurRadius = 10.0;
+  static const _defaultShadow = [BoxShadow(blurRadius: _blurRadius, color: Colors.black26)];
 
   const EnvelopRefreshIndicator({
-    Key? key,
+    super.key,
     required this.child,
     required this.onRefresh,
     this.leadingScrollIndicatorVisible = false,
     this.trailingScrollIndicatorVisible = false,
     this.accent,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
     return CustomRefreshIndicator(
       leadingScrollIndicatorVisible: leadingScrollIndicatorVisible,
       trailingScrollIndicatorVisible: trailingScrollIndicatorVisible,
-      builder: (context, child, controller) =>
-          LayoutBuilder(builder: (context, constraints) {
+      builder: (context, child, controller) => LayoutBuilder(builder: (context, constraints) {
         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 + _blurRadius - ((letterTopWidth + _blurRadius) * controller.value / 1))
+            .clamp(letterTopWidth - 100, double.infinity);
 
-        final rightValue = (widgetWidth - (widgetWidth * controller.value / 1))
-            .clamp(0.0, double.infinity);
+        final rightShift = widgetWidth + _blurRadius;
+        final rightValue = (rightShift - (rightShift * controller.value / 1)).clamp(0.0, double.infinity);
 
         final opacity = (controller.value - 1).clamp(0, 0.5) / 0.5;
+
+        final isNotIdle = !controller.isIdle;
         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,
+            if (isNotIdle)
+              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 (isNotIdle)
+              Positioned(
+                left: leftValue,
+                child: CustomPaint(
+                  size: Size(
+                    letterTopWidth,
+                    widgetHeight,
+                  ),
+                  painter: TrianglePainter(
+                    strokeColor: Colors.white,
+                    paintingStyle: PaintingStyle.fill,
+                  ),
                 ),
               ),
-            ),
             if (controller.value >= 1)
               Container(
                 padding: const EdgeInsets.only(right: 100),
                 child: Transform.scale(
                   scale: controller.value,
                   child: Opacity(
-                    opacity: controller.isLoading ? 1 : opacity,
+                    opacity: controller.isLoading || controller.state.isSettling ? 1 : opacity,
                     child: Align(
                       alignment: Alignment.center,
                       child: Container(
                         width: _circleSize,
                         height: _circleSize,
                         decoration: BoxDecoration(
                           boxShadow: _defaultShadow,
-                          color:
-                              accent ?? Theme.of(context).colorScheme.primary,
+                          color: accent ?? Theme.of(context).colorScheme.primary,
                           shape: BoxShape.circle,
                         ),
                         child: Stack(
+                          fit: StackFit.expand,
                           alignment: Alignment.center,
                           children: <Widget>[
-                            SizedBox(
-                              height: double.infinity,
-                              width: double.infinity,
-                              child: CircularProgressIndicator(
-                                valueColor:
-                                    const AlwaysStoppedAnimation(Colors.black),
-                                value: controller.isLoading ? null : 0,
-                              ),
+                            CircularProgressIndicator(
+                              valueColor: const AlwaysStoppedAnimation(Colors.black),
+                              value: controller.isLoading ? null : 0,
                             ),
                             const Icon(
                               Icons.mail_outline,
@@ -132,10 +128,7 @@ class TrianglePainter extends CustomPainter {
     return radius * 0.57735 + 0.5;
   }
 
-  TrianglePainter(
-      {this.strokeColor = Colors.black,
-      this.strokeWidth = 3,
-      this.paintingStyle = PaintingStyle.stroke});
+  TrianglePainter({this.strokeColor = Colors.black, this.strokeWidth = 3, this.paintingStyle = PaintingStyle.stroke});
 
   @override
   void paint(Canvas canvas, Size size) {
@@ -146,8 +139,7 @@ class TrianglePainter extends CustomPainter {
     final path = getTrianglePath(size.width, size.height);
     final shadowPaint = Paint()
       ..color = Colors.black.withAlpha(50)
-      ..maskFilter =
-          MaskFilter.blur(BlurStyle.normal, convertRadiusToSigma(10));
+      ..maskFilter = MaskFilter.blur(BlurStyle.normal, convertRadiusToSigma(10));
     canvas.drawPath(path, shadowPaint);
 
     canvas.drawPath(path, paint);