From 4daabeb901d4688ad9954b001939a6df9cb4ed63 Mon Sep 17 00:00:00 2001 From: Eslam Mohammed <42094349+mreslamgeek@users.noreply.github.com> Date: Wed, 26 Jul 2023 15:11:40 +0300 Subject: [PATCH 1/5] Update CHANGELOG.md --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3af9187..539b372 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## 3.0.2 +* Add borderRadius and gradient for the back container + ## 3.0.1 * Fixed Deprecated Methods that are no longer used. * General code cleanup. @@ -38,4 +41,4 @@ * Fixed dart analysis issue. ## 1.0.0 -* Initial Release. \ No newline at end of file +* Initial Release. From fc25893cb3c381c63fcf3187967b4813c40869ae Mon Sep 17 00:00:00 2001 From: Eslam Mohammed <42094349+mreslamgeek@users.noreply.github.com> Date: Wed, 26 Jul 2023 15:12:09 +0300 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d2e25ee..f30f0cf 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ Add this to your package's `pubspec.yaml` file: ```yaml dependencies: - liquid_pull_to_refresh: ^3.0.1 + liquid_pull_to_refresh: ^3.0.2 ``` ### 2. Install it From d80fa3ab3d45a994b91686aa25475976d1c244d6 Mon Sep 17 00:00:00 2001 From: Eslam Mohammed <42094349+mreslamgeek@users.noreply.github.com> Date: Wed, 26 Jul 2023 15:12:30 +0300 Subject: [PATCH 3/5] Update pubspec.yaml --- pubspec.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pubspec.yaml b/pubspec.yaml index 769ca40..fa78496 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: liquid_pull_to_refresh description: A beautiful and custom refresh indicator with some cool animations and transitions for flutter. -version: 3.0.1 +version: 3.0.2 homepage: https://github.com/aagarwal1012/Liquid-Pull-To-Refresh/ environment: @@ -14,4 +14,4 @@ dev_dependencies: flutter_test: sdk: flutter -flutter: \ No newline at end of file +flutter: From 5f0500692f0febaa0464c01c637582c219c95fb0 Mon Sep 17 00:00:00 2001 From: Eslam Mohammed <42094349+mreslamgeek@users.noreply.github.com> Date: Wed, 26 Jul 2023 15:13:23 +0300 Subject: [PATCH 4/5] Update liquid_pull_to_refresh.dart add border radius and gradient for back container --- lib/liquid_pull_to_refresh.dart | 206 ++++++++++++++------------------ 1 file changed, 91 insertions(+), 115 deletions(-) diff --git a/lib/liquid_pull_to_refresh.dart b/lib/liquid_pull_to_refresh.dart index 90b2c33..19dc1fc 100644 --- a/lib/liquid_pull_to_refresh.dart +++ b/lib/liquid_pull_to_refresh.dart @@ -49,6 +49,8 @@ class LiquidPullToRefresh extends StatefulWidget { this.animSpeedFactor = 1.0, required this.child, required this.onRefresh, + this.borderRadius, + this.gradient, this.color, this.backgroundColor, this.height, @@ -107,6 +109,14 @@ class LiquidPullToRefresh extends StatefulWidget { /// [ThemeData.canvasColor] by default. final Color? backgroundColor; + /// The progress indicator's background borderRadius. + /// Its null by default + final BorderRadiusGeometry? borderRadius; + + /// The progress indicator's background gradient. + /// Its null by default + final Gradient? gradient; + @override LiquidPullToRefreshState createState() => LiquidPullToRefreshState(); } @@ -150,27 +160,22 @@ class LiquidPullToRefreshState extends State bool? _isIndicatorAtTop; double? _dragOffset; - static final Animatable _threeQuarterTween = - Tween(begin: 0.0, end: 0.75); - static final Animatable _oneToZeroTween = - Tween(begin: 1.0, end: 0.0); + static final Animatable _threeQuarterTween = Tween(begin: 0.0, end: 0.75); + static final Animatable _oneToZeroTween = Tween(begin: 1.0, end: 0.0); @override void initState() { super.initState(); _springController = AnimationController(vsync: this); - _springAnimation = - _springController.drive(Tween(begin: 1.0, end: -1.0)); + _springAnimation = _springController.drive(Tween(begin: 1.0, end: -1.0)); - _progressingController = AnimationController( - vsync: this, duration: Duration(milliseconds: 1000)); - _progressingRotateAnimation = - Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( + _progressingController = + AnimationController(vsync: this, duration: Duration(milliseconds: 1000)); + _progressingRotateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _progressingController, curve: Interval(0.0, 1.0), )); - _progressingPercentAnimation = - Tween(begin: 0.25, end: 5 / 6).animate(CurvedAnimation( + _progressingPercentAnimation = Tween(begin: 0.25, end: 5 / 6).animate(CurvedAnimation( parent: _progressingController, curve: Interval(0.0, 1.0, curve: ProgressRingCurve()), )); @@ -181,44 +186,34 @@ class LiquidPullToRefreshState extends State )); _ringDisappearController = AnimationController(vsync: this); - _ringRadiusAnimation = Tween(begin: 1.0, end: 1.25).animate( - CurvedAnimation( - parent: _ringDisappearController, - curve: Interval(0.0, 0.2, curve: Curves.easeOut))); - _ringOpacityAnimation = Tween(begin: 1.0, end: 0.0).animate( - CurvedAnimation( - parent: _ringDisappearController, - curve: Interval(0.0, 0.2, curve: Curves.easeIn))); + _ringRadiusAnimation = Tween(begin: 1.0, end: 1.25).animate(CurvedAnimation( + parent: _ringDisappearController, curve: Interval(0.0, 0.2, curve: Curves.easeOut))); + _ringOpacityAnimation = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation( + parent: _ringDisappearController, curve: Interval(0.0, 0.2, curve: Curves.easeIn))); _showPeakController = AnimationController(vsync: this); - _peakHeightUpAnimation = Tween(begin: 0.0, end: 1.0).animate( - CurvedAnimation( - parent: _showPeakController, - curve: Interval(0.1, 0.2, curve: Curves.easeOut))); - _peakHeightDownAnimation = Tween(begin: 1.0, end: 0.0).animate( - CurvedAnimation( - parent: _showPeakController, - curve: Interval(0.2, 0.3, curve: Curves.easeIn))); + _peakHeightUpAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( + parent: _showPeakController, curve: Interval(0.1, 0.2, curve: Curves.easeOut))); + _peakHeightDownAnimation = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation( + parent: _showPeakController, curve: Interval(0.2, 0.3, curve: Curves.easeIn))); _indicatorMoveWithPeakController = AnimationController(vsync: this); - _indicatorTranslateWithPeakAnimation = Tween(begin: 0.0, end: 1.0) - .animate(CurvedAnimation( - parent: _indicatorMoveWithPeakController, - curve: Interval(0.1, 0.2, curve: Curves.easeOut))); - _indicatorRadiusWithPeakAnimation = Tween(begin: 0.0, end: 1.0) - .animate(CurvedAnimation( + _indicatorTranslateWithPeakAnimation = Tween(begin: 0.0, end: 1.0).animate( + CurvedAnimation( parent: _indicatorMoveWithPeakController, curve: Interval(0.1, 0.2, curve: Curves.easeOut))); + _indicatorRadiusWithPeakAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( + parent: _indicatorMoveWithPeakController, + curve: Interval(0.1, 0.2, curve: Curves.easeOut))); _indicatorTranslateInOutController = AnimationController(vsync: this); - _indicatorTranslateAnimation = Tween(begin: 0.0, end: 1.0).animate( - CurvedAnimation( - parent: _indicatorTranslateInOutController, - curve: Interval(0.2, 0.6, curve: Curves.easeOut))); + _indicatorTranslateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( + parent: _indicatorTranslateInOutController, + curve: Interval(0.2, 0.6, curve: Curves.easeOut))); _radiusController = AnimationController(vsync: this); - _radiusAnimation = Tween(begin: 0.0, end: 1.0).animate( - CurvedAnimation(parent: _radiusController, curve: Curves.easeIn)); + _radiusAnimation = Tween(begin: 0.0, end: 1.0) + .animate(CurvedAnimation(parent: _radiusController, curve: Curves.easeIn)); _positionController = AnimationController(vsync: this); _value = _positionController.drive(_threeQuarterTween); @@ -231,12 +226,9 @@ class LiquidPullToRefreshState extends State final ThemeData theme = Theme.of(context); _valueColor = _positionController.drive( ColorTween( - begin: (widget.color ?? theme.colorScheme.secondary) - .withOpacity(0.0), - end: (widget.color ?? theme.colorScheme.secondary) - .withOpacity(1.0)) - .chain(CurveTween( - curve: const Interval(0.0, 1.0 / _kDragSizeFactorLimit))), + begin: (widget.color ?? theme.colorScheme.secondary).withOpacity(0.0), + end: (widget.color ?? theme.colorScheme.secondary).withOpacity(1.0)) + .chain(CurveTween(curve: const Interval(0.0, 1.0 / _kDragSizeFactorLimit))), ); super.didChangeDependencies(); } @@ -278,32 +270,26 @@ class LiquidPullToRefreshState extends State break; } if (indicatorAtTopNow != _isIndicatorAtTop) { - if (_mode == _LiquidPullToRefreshMode.drag || - _mode == _LiquidPullToRefreshMode.armed) + if (_mode == _LiquidPullToRefreshMode.drag || _mode == _LiquidPullToRefreshMode.armed) _dismiss(_LiquidPullToRefreshMode.canceled); } else if (notification is ScrollUpdateNotification) { - if (_mode == _LiquidPullToRefreshMode.drag || - _mode == _LiquidPullToRefreshMode.armed) { + if (_mode == _LiquidPullToRefreshMode.drag || _mode == _LiquidPullToRefreshMode.armed) { if (notification.metrics.extentBefore > 0.0) { _dismiss(_LiquidPullToRefreshMode.canceled); } else { - if (_dragOffset != null) - _dragOffset = _dragOffset! - notification.scrollDelta!; + if (_dragOffset != null) _dragOffset = _dragOffset! - notification.scrollDelta!; _checkDragOffset(notification.metrics.viewportDimension); } } - if (_mode == _LiquidPullToRefreshMode.armed && - notification.dragDetails == null) { + if (_mode == _LiquidPullToRefreshMode.armed && notification.dragDetails == null) { // On iOS start the refresh when the Scrollable bounces back from the // OverScroll (ScrollNotification indicating this don't have dragDetails // because the scroll activity is not directly triggered by a drag). _show(); } } else if (notification is OverscrollNotification) { - if (_mode == _LiquidPullToRefreshMode.drag || - _mode == _LiquidPullToRefreshMode.armed) { - if (_dragOffset != null) - _dragOffset = _dragOffset! - notification.overscroll / 2.0; + if (_mode == _LiquidPullToRefreshMode.drag || _mode == _LiquidPullToRefreshMode.armed) { + if (_dragOffset != null) _dragOffset = _dragOffset! - notification.overscroll / 2.0; _checkDragOffset(notification.metrics.viewportDimension); } } else if (notification is ScrollEndNotification) { @@ -337,8 +323,8 @@ class LiquidPullToRefreshState extends State // This can only be called from _show() when refreshing and // _handleScrollNotification in response to a ScrollEndNotification or // direction change. - assert(newMode == _LiquidPullToRefreshMode.canceled || - newMode == _LiquidPullToRefreshMode.done); + assert( + newMode == _LiquidPullToRefreshMode.canceled || newMode == _LiquidPullToRefreshMode.done); setState(() { _mode = newMode; }); @@ -350,59 +336,58 @@ class LiquidPullToRefreshState extends State // progress ring disappear animation _ringDisappearController.animateTo(1.0, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - widget.animSpeedFactor) - .round()), + milliseconds: + (widget.springAnimationDurationInMilliseconds / widget.animSpeedFactor) + .round()), curve: Curves.linear); // indicator translate out _indicatorMoveWithPeakController.animateTo(0.0, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - widget.animSpeedFactor) - .round()), + milliseconds: + (widget.springAnimationDurationInMilliseconds / widget.animSpeedFactor) + .round()), curve: Curves.linear); _indicatorTranslateInOutController.animateTo(0.0, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - widget.animSpeedFactor) - .round()), + milliseconds: + (widget.springAnimationDurationInMilliseconds / widget.animSpeedFactor) + .round()), curve: Curves.linear); //initial value of controller is 1.0 await _showPeakController.animateTo(0.3, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - widget.animSpeedFactor) - .round()), + milliseconds: + (widget.springAnimationDurationInMilliseconds / widget.animSpeedFactor) + .round()), curve: Curves.linear); _radiusController.animateTo(0.0, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - (widget.animSpeedFactor * 5)) - .round()), + milliseconds: + (widget.springAnimationDurationInMilliseconds / (widget.animSpeedFactor * 5)) + .round()), curve: Curves.linear); _showPeakController.value = 0.175; await _showPeakController.animateTo(0.1, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - (widget.animSpeedFactor * 5)) - .round()), + milliseconds: + (widget.springAnimationDurationInMilliseconds / (widget.animSpeedFactor * 5)) + .round()), curve: Curves.easeOut); _showPeakController.value = 0.0; await _positionController.animateTo(0.0, duration: Duration( - milliseconds: (widget.springAnimationDurationInMilliseconds / - widget.animSpeedFactor) - .round())); + milliseconds: + (widget.springAnimationDurationInMilliseconds / widget.animSpeedFactor) + .round())); break; case _LiquidPullToRefreshMode.canceled: - await _positionController.animateTo(0.0, - duration: _kIndicatorScaleDuration); + await _positionController.animateTo(0.0, duration: _kIndicatorScaleDuration); break; default: assert(false); @@ -446,16 +431,12 @@ class LiquidPullToRefreshState extends State } void _checkDragOffset(double containerExtent) { - assert(_mode == _LiquidPullToRefreshMode.drag || - _mode == _LiquidPullToRefreshMode.armed); - double newValue = - _dragOffset! / (containerExtent * _kDragContainerExtentPercentage); + assert(_mode == _LiquidPullToRefreshMode.drag || _mode == _LiquidPullToRefreshMode.armed); + double newValue = _dragOffset! / (containerExtent * _kDragContainerExtentPercentage); if (_mode == _LiquidPullToRefreshMode.armed) newValue = math.max(newValue, 1.0 / _kDragSizeFactorLimit); - _positionController.value = - newValue.clamp(0.0, 1.0); // this triggers various rebuilds - if (_mode == _LiquidPullToRefreshMode.drag && - _valueColor.value!.alpha == 0xFF) + _positionController.value = newValue.clamp(0.0, 1.0); // this triggers various rebuilds + if (_mode == _LiquidPullToRefreshMode.drag && _valueColor.value!.alpha == 0xFF) _mode = _LiquidPullToRefreshMode.armed; } @@ -467,36 +448,30 @@ class LiquidPullToRefreshState extends State _mode = _LiquidPullToRefreshMode.snap; _positionController.animateTo(1.0 / _kDragSizeFactorLimit, - duration: Duration( - milliseconds: widget.springAnimationDurationInMilliseconds), + duration: Duration(milliseconds: widget.springAnimationDurationInMilliseconds), curve: Curves.linear); _showPeakController.animateTo(1.0, - duration: Duration( - milliseconds: widget.springAnimationDurationInMilliseconds), + duration: Duration(milliseconds: widget.springAnimationDurationInMilliseconds), curve: Curves.linear); //indicator translate in with peak _indicatorMoveWithPeakController.animateTo(1.0, - duration: Duration( - milliseconds: widget.springAnimationDurationInMilliseconds), + duration: Duration(milliseconds: widget.springAnimationDurationInMilliseconds), curve: Curves.linear); //indicator move to center _indicatorTranslateInOutController.animateTo(1.0, - duration: Duration( - milliseconds: widget.springAnimationDurationInMilliseconds), + duration: Duration(milliseconds: widget.springAnimationDurationInMilliseconds), curve: Curves.linear); // progress ring fade in _ringDisappearController.animateTo(0.0, - duration: Duration( - milliseconds: widget.springAnimationDurationInMilliseconds)); + duration: Duration(milliseconds: widget.springAnimationDurationInMilliseconds)); _springController .animateTo(0.5, - duration: Duration( - milliseconds: widget.springAnimationDurationInMilliseconds), + duration: Duration(milliseconds: widget.springAnimationDurationInMilliseconds), curve: Curves.elasticOut) .then((void value) { if (mounted && _mode == _LiquidPullToRefreshMode.snap) { @@ -538,8 +513,7 @@ class LiquidPullToRefreshState extends State /// actual scroll view. It defaults to showing the indicator at the top. To /// show it at the bottom, set `atTop` to false. Future? show({bool atTop = true}) { - if (_mode != _LiquidPullToRefreshMode.refresh && - _mode != _LiquidPullToRefreshMode.snap) { + if (_mode != _LiquidPullToRefreshMode.refresh && _mode != _LiquidPullToRefreshMode.snap) { if (_mode == null) _start(atTop ? AxisDirection.down : AxisDirection.up); _show(); } @@ -561,9 +535,8 @@ class LiquidPullToRefreshState extends State // checking whether to take default values or not Color color = (widget.color != null) ? widget.color! : _defaultColor; - Color backgroundColor = (widget.backgroundColor != null) - ? widget.backgroundColor! - : _defaultBackgroundColor; + Color backgroundColor = + (widget.backgroundColor != null) ? widget.backgroundColor! : _defaultBackgroundColor; double height = (widget.height != null) ? widget.height! : _defaultHeight; final Widget child = NotificationListener( @@ -591,8 +564,7 @@ class LiquidPullToRefreshState extends State return Opacity( // -0.01 is done for elasticOut curve opacity: (widget.showChildOpacityTransition) - ? (_childOpacityAnimation.value - (1 / 3) - 0.01) - .clamp(0.0, 1.0) + ? (_childOpacityAnimation.value - (1 / 3) - 0.01).clamp(0.0, 1.0) : 1.0, child: child); } @@ -619,14 +591,18 @@ class LiquidPullToRefreshState extends State ((_peakHeightUpAnimation.value != 1.0) //30.0 ? _peakHeightUpAnimation.value : _peakHeightDownAnimation.value), - peakWidth: (_peakHeightUpAnimation.value != 0.0 && - _peakHeightDownAnimation.value != 0.0) - ? height * 35 / 100 //35.0 - : 0.0, + peakWidth: + (_peakHeightUpAnimation.value != 0.0 && _peakHeightDownAnimation.value != 0.0) + ? height * 35 / 100 //35.0 + : 0.0, ), child: Container( height: _value.value * height * 2, // 100.0 - color: color, + decoration: BoxDecoration( + color: color, + borderRadius: widget.borderRadius, + gradient: widget.gradient, + ), ), ); }, From 5d92faa2addf1c58896fe4067e12bb7efea7294e Mon Sep 17 00:00:00 2001 From: Eslam Mohammed <42094349+mreslamgeek@users.noreply.github.com> Date: Wed, 26 Jul 2023 15:14:01 +0300 Subject: [PATCH 5/5] Update main.dart add border radius and gradient for back container --- example/lib/main.dart | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 3403f39..7e1f199 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -38,8 +38,7 @@ class _MyHomePageState extends State { GlobalKey(); static int refreshNum = 10; // number that changes when refreshed - Stream counterStream = - Stream.periodic(const Duration(seconds: 3), (x) => refreshNum); + Stream counterStream = Stream.periodic(const Duration(seconds: 3), (x) => refreshNum); ScrollController? _scrollController; @@ -111,6 +110,17 @@ class _MyHomePageState extends State { key: _refreshIndicatorKey, onRefresh: _handleRefresh, showChildOpacityTransition: false, + borderRadius: BorderRadius.circular(50), + springAnimationDurationInMilliseconds: 100, + gradient: const LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + stops: [0.6, 0.9], + colors: [ + Colors.transparent, + Colors.red, + ], + ), child: StreamBuilder( stream: counterStream, builder: (context, snapshot) {