fix: minor corrections to the envelope indicator

Author: gonuit

CHANGELOG.md

@@ -2,6 +2,7 @@
 - The drag details have been exposed to allow animations based on the position of the pointer.
 - Example app:
   - The checkmark indicator example has been simplified.
+  - Minor corrections to the envelope indicator.
   - Removed unused code.
 ## 2.2.1
 - Fixed typos in documentation

example/lib/indicators/check_mark_indicator.dart

@@ -23,7 +23,8 @@ class CheckMarkStyle {
 
   static const defaultStyle = CheckMarkStyle(
     loading: CheckMarkColors(content: Colors.white, background: Colors.black),
-    completed: CheckMarkColors(content: Colors.white, background: Colors.greenAccent),
+    completed:
+        CheckMarkColors(content: Colors.white, background: Colors.greenAccent),
   );
 }
 
@@ -41,7 +42,8 @@ class CheckMarkIndicator extends StatefulWidget {
   State<CheckMarkIndicator> createState() => _CheckMarkIndicatorState();
 }
 
-class _CheckMarkIndicatorState extends State<CheckMarkIndicator> with SingleTickerProviderStateMixin {
+class _CheckMarkIndicatorState extends State<CheckMarkIndicator>
+    with SingleTickerProviderStateMixin {
   /// Whether to render check mark instead of spinner
   bool _renderCompleteState = false;
 
@@ -72,7 +74,9 @@ class _CheckMarkIndicatorState extends State<CheckMarkIndicator> with SingleTick
           BuildContext context,
           IndicatorController controller,
         ) {
-          final style = _renderCompleteState ? widget.style.completed : widget.style.loading;
+          final style = _renderCompleteState
+              ? widget.style.completed
+              : widget.style.loading;
           return AnimatedContainer(
             duration: const Duration(milliseconds: 150),
             alignment: Alignment.center,
@@ -91,7 +95,9 @@ class _CheckMarkIndicatorState extends State<CheckMarkIndicator> with SingleTick
                     child: CircularProgressIndicator(
                       strokeWidth: 2,
                       color: style.content,
-                      value: controller.isDragging || controller.isArmed ? controller.value.clamp(0.0, 1.0) : null,
+                      value: controller.isDragging || controller.isArmed
+                          ? controller.value.clamp(0.0, 1.0)
+                          : null,
                     ),
                   ),
           );

example/lib/indicators/envelope_indicator.dart

@@ -10,8 +10,9 @@ class EnvelopRefreshIndicator extends StatelessWidget {
 
   static const _circleSize = 70.0;
 
+  static const _blurRadius = 10.0;
   static const _defaultShadow = [
-    BoxShadow(blurRadius: 10, color: Colors.black26)
+    BoxShadow(blurRadius: _blurRadius, color: Colors.black26)
   ];
 
   const EnvelopRefreshIndicator({
@@ -34,51 +35,59 @@ class EnvelopRefreshIndicator extends StatelessWidget {
         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))
+        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(
@@ -91,16 +100,13 @@ class EnvelopRefreshIndicator extends StatelessWidget {
                           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,