feat: Add BezierIndicator.onlySpin (#689).

xuelongqy · May 11, 2023 · c429add · c429add
1 parent 51d25b5
commit c429add
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## Next
 - fix: BezierIndicator.spinBuilder doesn't work. 
 - feat: Add BezierIndicator.spinInCenter.
+- feat: Add BezierIndicator.onlySpin [#689](https://github.com/xuelongqy/flutter_easy_refresh/issues/689).
 
 ## 3.3.1+2
 - fix: Secondary click event hit area [#688](https://github.com/xuelongqy/flutter_easy_refresh/issues/688), Thanks notbucai for [PR#714](https://github.com/xuelongqy/flutter_easy_refresh/pull/714).

diff --git a/example/lib/l10n/translations/en.dart b/example/lib/l10n/translations/en.dart
@@ -36,6 +36,7 @@ const en = {
   'Disable': 'Disable',
   'Display balls': 'Display balls',
   'Spin in center': 'Spin in center',
+  'Only show spin': 'Only show spin',
   'Bezier circle': 'Bezier circle',
   'Golden campus': 'Golden campus',
   'Rush to the sky': 'Rush to the sky',

diff --git a/example/lib/l10n/translations/zh_cn.dart b/example/lib/l10n/translations/zh_cn.dart
@@ -36,6 +36,7 @@ const zhCN = {
   'Disable': '禁用',
   'Display balls': '显示小球',
   'Spin in center': 'Spin居中',
+  'Only show spin': '只显示Spin',
   'Bezier circle': '弹出圆圈',
   'Golden campus': '金色校园',
   'Rush to the sky': '冲上云霄',

diff --git a/example/lib/page/style/bezier_page.dart b/example/lib/page/style/bezier_page.dart
@@ -240,6 +240,7 @@ class _BezierPageState extends State<BezierPage> {
           clamping: _headerProperties.clamping,
           showBalls: _headerProperties.displayBalls,
           spinInCenter: _headerProperties.spinInCenter,
+          onlySpin: _headerProperties.onlySpin,
           spinWidget: _spinWidget(
               _headerProperties.spin, themeData.colorScheme.onPrimary),
         ),
@@ -249,6 +250,7 @@ class _BezierPageState extends State<BezierPage> {
           clamping: _footerProperties.clamping,
           showBalls: _footerProperties.displayBalls,
           spinInCenter: _footerProperties.spinInCenter,
+          onlySpin: _footerProperties.onlySpin,
           spinWidget: _spinWidget(
               _headerProperties.spin, themeData.colorScheme.onPrimary),
         ),
@@ -407,6 +409,17 @@ class _BezierPageState extends State<BezierPage> {
                                 },
                               ),
                             ),
+                            ListTile(
+                              title: Text('Only show spin'.tr),
+                              trailing: Switch(
+                                value: properties.onlySpin,
+                                onChanged: (value) {
+                                  setState(() {
+                                    properties.onlySpin = value;
+                                  });
+                                },
+                              ),
+                            ),
                             const ListTile(
                               title: Text('Spin'),
                             ),
@@ -455,6 +468,7 @@ class _BIProperties {
   bool displayBalls = true;
   String spin = 'HourGlass';
   bool spinInCenter = true;
+  bool onlySpin = false;
 
   _BIProperties({
     required this.name,

diff --git a/lib/src/styles/bezier/bezier_indicator.dart b/lib/src/styles/bezier/bezier_indicator.dart
@@ -40,13 +40,18 @@ class _BezierIndicator extends StatefulWidget {
   /// Whether the spin widget is in the center.
   final bool spinInCenter;
 
+  /// Only display the spin.
+  /// When true, the balls are no longer displayed.
+  final bool onlySpin;
+
   const _BezierIndicator({
     Key? key,
     required this.state,
     required this.reverse,
     required this.processedDuration,
     this.showBalls = true,
     this.spinInCenter = true,
+    this.onlySpin = false,
     this.spinWidget,
     this.noMoreWidget,
     this.spinBuilder,
@@ -111,8 +116,11 @@ class _BezierIndicatorState extends State<_BezierIndicator>
 
   /// Build balls.
   Widget _buildBalls() {
-    final extent = (!widget.spinInCenter && _offset > _actualTriggerOffset) ? _actualTriggerOffset : null;
-    final full = widget.spinInCenter || (!widget.spinInCenter && _offset <= _actualTriggerOffset);
+    final extent = (!widget.spinInCenter && _offset > _actualTriggerOffset)
+        ? _actualTriggerOffset
+        : null;
+    final full = widget.spinInCenter ||
+        (!widget.spinInCenter && _offset <= _actualTriggerOffset);
     return Positioned(
       top: (_axis == Axis.vertical && _reverse && !full) ? null : 0,
       bottom: (_axis == Axis.vertical && !_reverse && !full) ? null : 0,
@@ -135,11 +143,11 @@ class _BezierIndicatorState extends State<_BezierIndicator>
                 Positioned(
                   left: _axis == Axis.vertical
                       ? ((length - ballSize) / 2) +
-                      (ballArea / 8 * scale) * (i - 3)
+                          (ballArea / 8 * scale) * (i - 3)
                       : null,
                   bottom: _axis == Axis.horizontal
                       ? ((length - ballSize) / 2) +
-                      (ballArea / 8 * scale) * (i - 3)
+                          (ballArea / 8 * scale) * (i - 3)
                       : null,
                   child: AnimatedBuilder(
                     animation: _animationController,
@@ -163,8 +171,8 @@ class _BezierIndicatorState extends State<_BezierIndicator>
                           height: ballSize,
                           decoration: BoxDecoration(
                             color: _foregroundColor,
-                            borderRadius: BorderRadius.all(
-                                Radius.circular(ballSize / 2)),
+                            borderRadius:
+                                BorderRadius.all(Radius.circular(ballSize / 2)),
                           ),
                         ),
                       );
@@ -194,11 +202,32 @@ class _BezierIndicatorState extends State<_BezierIndicator>
       animation: _animationController,
       builder: (context, _) {
         return Transform.scale(
-          scale: _animationController.value,
+          scale: widget.onlySpin ? 1 : _animationController.value,
           child: spinWidget,
         );
       },
     );
+    if (widget.onlySpin && _offset < _actualTriggerOffset) {
+      return Positioned(
+        top: (_axis == Axis.vertical && !_reverse)
+            ? -(_actualTriggerOffset - _offset) / 2
+            : null,
+        bottom: (_axis == Axis.vertical && _reverse)
+            ? -(_actualTriggerOffset - _offset) / 2
+            : null,
+        left: (_axis == Axis.horizontal && !_reverse)
+            ? -(_actualTriggerOffset - _offset) / 2
+            : null,
+        right: (_axis == Axis.horizontal && _reverse)
+            ? -(_actualTriggerOffset - _offset) / 2
+            : null,
+        height: _axis == Axis.vertical ? _actualTriggerOffset : null,
+        width: _axis == Axis.vertical ? null : _actualTriggerOffset,
+        child: Center(
+          child: animatedWidget,
+        ),
+      );
+    }
     if (!widget.spinInCenter) {
       return Positioned(
         top: (_axis == Axis.vertical && _reverse) ? null : 0,
@@ -233,10 +262,14 @@ class _BezierIndicatorState extends State<_BezierIndicator>
           color: widget.backgroundColor,
         ),
         if (widget.showBalls &&
+            !widget.onlySpin &&
             _offset > _safeOffset &&
             widget.state.result != IndicatorResult.noMore)
           _buildBalls(),
-        if (_mode == IndicatorMode.ready || _mode == IndicatorMode.processing)
+        if (_mode == IndicatorMode.ready ||
+            _mode == IndicatorMode.processing ||
+            (widget.onlySpin &&
+                (_mode == IndicatorMode.drag || _mode == IndicatorMode.armed)))
           _buildSpin(),
         if (widget.state.result == IndicatorResult.noMore)
           Positioned(

diff --git a/lib/src/styles/bezier/footer/bezier_footer.dart b/lib/src/styles/bezier/footer/bezier_footer.dart
@@ -25,6 +25,10 @@ class BezierFooter extends Footer {
   /// Whether the spin widget is in the center.
   final bool spinInCenter;
 
+  /// Only display the spin.
+  /// When true, the balls are no longer displayed.
+  final bool onlySpin;
+
   const BezierFooter({
     this.key,
     double triggerOffset = 100,
@@ -42,6 +46,7 @@ class BezierFooter extends Footer {
     bool hapticFeedback = false,
     this.showBalls = true,
     this.spinInCenter = true,
+    this.onlySpin = false,
     this.spinWidget,
     this.noMoreWidget,
     this.spinBuilder,
@@ -72,6 +77,7 @@ class BezierFooter extends Footer {
       processedDuration: processedDuration,
       showBalls: showBalls,
       spinInCenter: spinInCenter,
+      onlySpin: onlySpin,
       spinWidget: spinWidget,
       noMoreWidget: noMoreWidget,
       spinBuilder: spinBuilder,

diff --git a/lib/src/styles/bezier/header/bezier_header.dart b/lib/src/styles/bezier/header/bezier_header.dart
@@ -25,6 +25,10 @@ class BezierHeader extends Header {
   /// Whether the spin widget is in the center.
   final bool spinInCenter;
 
+  /// Only display the spin.
+  /// When true, the balls are no longer displayed.
+  final bool onlySpin;
+
   const BezierHeader({
     this.key,
     double triggerOffset = 100,
@@ -42,6 +46,7 @@ class BezierHeader extends Header {
     bool hapticFeedback = false,
     this.showBalls = true,
     this.spinInCenter = true,
+    this.onlySpin = false,
     this.spinWidget,
     this.noMoreWidget,
     this.spinBuilder,
@@ -72,6 +77,7 @@ class BezierHeader extends Header {
       processedDuration: processedDuration,
       showBalls: showBalls,
       spinInCenter: spinInCenter,
+      onlySpin: onlySpin,
       spinWidget: spinWidget,
       noMoreWidget: noMoreWidget,
       spinBuilder: spinBuilder,