From 3549d84e47d1d70603a4828a4a71c1e40af2c22d Mon Sep 17 00:00:00 2001 From: Khushboo Date: Fri, 2 Aug 2024 13:06:31 +0530 Subject: [PATCH 1/3] Added support to enlarge center option and keep fixed size for others --- lib/carousel_options.dart | 71 ++++++++++++++++++------------- lib/carousel_slider.dart | 89 +++++++++++++++++++++++++++------------ 2 files changed, 103 insertions(+), 57 deletions(-) diff --git a/lib/carousel_options.dart b/lib/carousel_options.dart index ec29cd3..0f73c7b 100644 --- a/lib/carousel_options.dart +++ b/lib/carousel_options.dart @@ -135,6 +135,9 @@ class CarouselOptions { final Color? overlayColor; + //This property defaults to false, if set to true, the center page will be enlarged and the other pages will be fixed. + final bool enlargeCenterFixedOthers; + CarouselOptions({ this.height, this.aspectRatio = 16 / 9, @@ -163,37 +166,40 @@ class CarouselOptions { this.padEnds = true, this.clipBehavior = Clip.hardEdge, this.overlayColor, + this.enlargeCenterFixedOthers = false, }); ///Generate new [CarouselOptions] based on old ones. - CarouselOptions copyWith( - {double? height, - double? aspectRatio, - double? viewportFraction, - int? initialPage, - bool? enableInfiniteScroll, - bool? reverse, - bool? autoPlay, - Duration? autoPlayInterval, - Duration? autoPlayAnimationDuration, - Curve? autoPlayCurve, - bool? enlargeCenterPage, - Function(int index, CarouselPageChangedReason reason)? onPageChanged, - ValueChanged? onScrolled, - ScrollPhysics? scrollPhysics, - bool? pageSnapping, - Axis? scrollDirection, - bool? pauseAutoPlayOnTouch, - bool? pauseAutoPlayOnManualNavigate, - bool? pauseAutoPlayInFiniteScroll, - PageStorageKey? pageViewKey, - CenterPageEnlargeStrategy? enlargeStrategy, - double? enlargeFactor, - bool? disableCenter, - Clip? clipBehavior, - bool? padEnds, - Color? overlayColor}) => + CarouselOptions copyWith({ + double? height, + double? aspectRatio, + double? viewportFraction, + int? initialPage, + bool? enableInfiniteScroll, + bool? reverse, + bool? autoPlay, + Duration? autoPlayInterval, + Duration? autoPlayAnimationDuration, + Curve? autoPlayCurve, + bool? enlargeCenterPage, + Function(int index, CarouselPageChangedReason reason)? onPageChanged, + ValueChanged? onScrolled, + ScrollPhysics? scrollPhysics, + bool? pageSnapping, + Axis? scrollDirection, + bool? pauseAutoPlayOnTouch, + bool? pauseAutoPlayOnManualNavigate, + bool? pauseAutoPlayInFiniteScroll, + PageStorageKey? pageViewKey, + CenterPageEnlargeStrategy? enlargeStrategy, + double? enlargeFactor, + bool? disableCenter, + Clip? clipBehavior, + bool? padEnds, + Color? overlayColor, + bool? enlargeCenterFixedOthers, + }) => CarouselOptions( height: height ?? this.height, aspectRatio: aspectRatio ?? this.aspectRatio, @@ -203,7 +209,8 @@ class CarouselOptions { reverse: reverse ?? this.reverse, autoPlay: autoPlay ?? this.autoPlay, autoPlayInterval: autoPlayInterval ?? this.autoPlayInterval, - autoPlayAnimationDuration: autoPlayAnimationDuration ?? this.autoPlayAnimationDuration, + autoPlayAnimationDuration: + autoPlayAnimationDuration ?? this.autoPlayAnimationDuration, autoPlayCurve: autoPlayCurve ?? this.autoPlayCurve, enlargeCenterPage: enlargeCenterPage ?? this.enlargeCenterPage, onPageChanged: onPageChanged ?? this.onPageChanged, @@ -212,8 +219,10 @@ class CarouselOptions { pageSnapping: pageSnapping ?? this.pageSnapping, scrollDirection: scrollDirection ?? this.scrollDirection, pauseAutoPlayOnTouch: pauseAutoPlayOnTouch ?? this.pauseAutoPlayOnTouch, - pauseAutoPlayOnManualNavigate: pauseAutoPlayOnManualNavigate ?? this.pauseAutoPlayOnManualNavigate, - pauseAutoPlayInFiniteScroll: pauseAutoPlayInFiniteScroll ?? this.pauseAutoPlayInFiniteScroll, + pauseAutoPlayOnManualNavigate: + pauseAutoPlayOnManualNavigate ?? this.pauseAutoPlayOnManualNavigate, + pauseAutoPlayInFiniteScroll: + pauseAutoPlayInFiniteScroll ?? this.pauseAutoPlayInFiniteScroll, pageViewKey: pageViewKey ?? this.pageViewKey, enlargeStrategy: enlargeStrategy ?? this.enlargeStrategy, enlargeFactor: enlargeFactor ?? this.enlargeFactor, @@ -221,5 +230,7 @@ class CarouselOptions { clipBehavior: clipBehavior ?? this.clipBehavior, padEnds: padEnds ?? this.padEnds, overlayColor: overlayColor ?? this.overlayColor, + enlargeCenterFixedOthers: + enlargeCenterFixedOthers ?? this.enlargeCenterFixedOthers, ); } diff --git a/lib/carousel_slider.dart b/lib/carousel_slider.dart index 9910c8b..c4cad49 100644 --- a/lib/carousel_slider.dart +++ b/lib/carousel_slider.dart @@ -13,7 +13,8 @@ import 'utils.dart'; export 'carousel_controller.dart'; export 'carousel_options.dart'; -typedef Widget ExtendedIndexedWidgetBuilder(BuildContext context, int index, int realIndex); +typedef Widget ExtendedIndexedWidgetBuilder( + BuildContext context, int index, int realIndex); class CarouselSlider extends StatefulWidget { /// [CarouselOptions] to create a [CarouselState] with @@ -65,7 +66,8 @@ class CarouselSlider extends StatefulWidget { CarouselSliderState createState() => CarouselSliderState(_carouselController); } -class CarouselSliderState extends State with TickerProviderStateMixin { +class CarouselSliderState extends State + with TickerProviderStateMixin { final CarouselControllerImpl carouselController; Timer? timer; @@ -105,7 +107,8 @@ class CarouselSliderState extends State with TickerProviderState @override void initState() { super.initState(); - carouselState = CarouselState(this.options, clearTimer, resumeTimer, this.changeMode); + carouselState = + CarouselState(this.options, clearTimer, resumeTimer, this.changeMode); carouselState!.itemCount = widget.itemCount; carouselController.state = carouselState; @@ -141,7 +144,8 @@ class CarouselSliderState extends State with TickerProviderState int nextPage = carouselState!.pageController!.page!.round() + 1; int itemCount = widget.itemCount ?? widget.items!.length; - if (nextPage >= itemCount && widget.options.enableInfiniteScroll == false) { + if (nextPage >= itemCount && + widget.options.enableInfiniteScroll == false) { if (widget.options.pauseAutoPlayInFiniteScroll) { clearTimer(); return; @@ -151,7 +155,8 @@ class CarouselSliderState extends State with TickerProviderState carouselState!.pageController! .animateToPage(nextPage, - duration: widget.options.autoPlayAnimationDuration, curve: widget.options.autoPlayCurve) + duration: widget.options.autoPlayAnimationDuration, + curve: widget.options.autoPlayCurve) .then((_) => changeMode(previousReason)); }) : null; @@ -186,13 +191,15 @@ class CarouselSliderState extends State with TickerProviderState if (widget.options.height != null) { wrapper = Container(height: widget.options.height, child: child); } else { - wrapper = AspectRatio(aspectRatio: widget.options.aspectRatio, child: child); + wrapper = + AspectRatio(aspectRatio: widget.options.aspectRatio, child: child); } if (true == widget.disableGesture) { return NotificationListener( onNotification: (Notification notification) { - if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) { + if (widget.options.onScrolled != null && + notification is ScrollUpdateNotification) { widget.options.onScrolled!(carouselState!.pageController!.page); } return false; @@ -204,8 +211,10 @@ class CarouselSliderState extends State with TickerProviderState return RawGestureDetector( behavior: HitTestBehavior.opaque, gestures: { - _MultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<_MultipleGestureRecognizer>( - () => _MultipleGestureRecognizer(), (_MultipleGestureRecognizer instance) { + _MultipleGestureRecognizer: + GestureRecognizerFactoryWithHandlers<_MultipleGestureRecognizer>( + () => _MultipleGestureRecognizer(), + (_MultipleGestureRecognizer instance) { instance.onStart = (_) { onStart(); }; @@ -222,7 +231,8 @@ class CarouselSliderState extends State with TickerProviderState }, child: NotificationListener( onNotification: (Notification notification) { - if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) { + if (widget.options.onScrolled != null && + notification is ScrollUpdateNotification) { widget.options.onScrolled!(carouselState!.pageController!.page); } return false; @@ -241,7 +251,11 @@ class CarouselSliderState extends State with TickerProviderState return Center(child: child); } - Widget getEnlargeWrapper(Widget? child, {double? width, double? height, double? scale, required double itemOffset}) { + Widget getEnlargeWrapper(Widget? child, + {double? width, + double? height, + double? scale, + required double itemOffset}) { if (widget.options.enlargeStrategy == CenterPageEnlargeStrategy.height) { return SizedBox(child: child, width: width, height: height); } @@ -255,7 +269,9 @@ class CarouselSliderState extends State with TickerProviderState } return Transform.scale(child: child, scale: scale!, alignment: alignment); } - return Transform.scale(scale: scale!, child: Container(child: child, width: width, height: height)); + return Transform.scale( + scale: scale!, + child: Container(child: child, width: width, height: height)); } Widget getOverlayWrapper(Widget? child, double overlayOpacity) { @@ -320,13 +336,15 @@ class CarouselSliderState extends State with TickerProviderState itemCount: widget.options.enableInfiniteScroll ? null : widget.itemCount, key: widget.options.pageViewKey, onPageChanged: (int index) { - int currentPage = getRealIndex(index + carouselState!.initialPage, carouselState!.realPage, widget.itemCount); + int currentPage = getRealIndex(index + carouselState!.initialPage, + carouselState!.realPage, widget.itemCount); if (widget.options.onPageChanged != null) { widget.options.onPageChanged!(currentPage, mode); } }, itemBuilder: (BuildContext context, int idx) { - final int index = getRealIndex(idx + carouselState!.initialPage, carouselState!.realPage, widget.itemCount); + final int index = getRealIndex(idx + carouselState!.initialPage, + carouselState!.realPage, widget.itemCount); return AnimatedBuilder( animation: carouselState!.pageController!, @@ -339,40 +357,57 @@ class CarouselSliderState extends State with TickerProviderState // to display the visual effect double itemOffset = 0; double opacityValue = 0; - if (widget.options.enlargeCenterPage != null && widget.options.enlargeCenterPage == true) { + if (widget.options.enlargeCenterPage != null && + widget.options.enlargeCenterPage == true) { // pageController.page can only be accessed after the first build, // so in the first build we calculate the itemoffset manually var position = carouselState?.pageController?.position; - if (position != null && position.hasPixels && position.hasContentDimensions) { + if (position != null && + position.hasPixels && + position.hasContentDimensions) { var _page = carouselState?.pageController?.page; if (_page != null) { itemOffset = _page - idx; } } else { - BuildContext storageContext = carouselState!.pageController!.position.context.storageContext; + BuildContext storageContext = carouselState! + .pageController!.position.context.storageContext; final double? previousSavedPosition = - PageStorage.of(storageContext).readState(storageContext) as double?; + PageStorage.of(storageContext).readState(storageContext) + as double?; if (previousSavedPosition != null) { itemOffset = previousSavedPosition - idx.toDouble(); } else { - itemOffset = carouselState!.realPage.toDouble() - idx.toDouble(); + itemOffset = + carouselState!.realPage.toDouble() - idx.toDouble(); } } - final double enlargeFactor = options.enlargeFactor.clamp(0.0, 1.0); - final num distortionRatio = (1 - (itemOffset.abs() * enlargeFactor)).clamp(0.0, 1.0); - distortionValue = Curves.easeOut.transform(distortionRatio as double); + final double enlargeFactor = + options.enlargeFactor.clamp(0.0, 1.0); + final offsetValue = options.enlargeCenterFixedOthers + ? itemOffset.abs().clamp(0, 1) + : itemOffset.abs(); + final num distortionRatio = + (1 - (offsetValue * enlargeFactor)).clamp(0.0, 1.0); + distortionValue = + Curves.easeOut.transform(distortionRatio as double); opacityValue = 1 - distortionRatio; } - final double height = - widget.options.height ?? MediaQuery.of(context).size.width * (1 / widget.options.aspectRatio); + final double height = widget.options.height ?? + MediaQuery.of(context).size.width * + (1 / widget.options.aspectRatio); if (widget.options.scrollDirection == Axis.horizontal) { - return getCenterWrapper(getEnlargeWrapper(getOverlayWrapper(child, opacityValue), - height: distortionValue * height, scale: distortionValue, itemOffset: itemOffset)); + return getCenterWrapper(getEnlargeWrapper( + getOverlayWrapper(child, opacityValue), + height: distortionValue * height, + scale: distortionValue, + itemOffset: itemOffset)); } else { - return getCenterWrapper(getEnlargeWrapper(getOverlayWrapper(child, opacityValue), + return getCenterWrapper(getEnlargeWrapper( + getOverlayWrapper(child, opacityValue), width: distortionValue * MediaQuery.of(context).size.width, scale: distortionValue, itemOffset: itemOffset)); From e14d95611ca6ba40f3c987f686ba67a427155890 Mon Sep 17 00:00:00 2001 From: Khushboo Date: Fri, 2 Aug 2024 15:36:21 +0530 Subject: [PATCH 2/3] remove formating changes --- lib/carousel_options.dart | 128 ++++++++++++++++++-------------------- lib/carousel_slider.dart | 90 +++++++++------------------ 2 files changed, 89 insertions(+), 129 deletions(-) diff --git a/lib/carousel_options.dart b/lib/carousel_options.dart index 0f73c7b..d667207 100644 --- a/lib/carousel_options.dart +++ b/lib/carousel_options.dart @@ -138,68 +138,66 @@ class CarouselOptions { //This property defaults to false, if set to true, the center page will be enlarged and the other pages will be fixed. final bool enlargeCenterFixedOthers; - CarouselOptions({ - this.height, - this.aspectRatio = 16 / 9, - this.viewportFraction = 0.8, - this.initialPage = 0, - this.enableInfiniteScroll = true, - this.animateToClosest = true, - this.reverse = false, - this.autoPlay = false, - this.autoPlayInterval = const Duration(seconds: 4), - this.autoPlayAnimationDuration = const Duration(milliseconds: 800), - this.autoPlayCurve = Curves.fastOutSlowIn, - this.enlargeCenterPage = false, - this.onPageChanged, - this.onScrolled, - this.scrollPhysics, - this.pageSnapping = true, - this.scrollDirection = Axis.horizontal, - this.pauseAutoPlayOnTouch = true, - this.pauseAutoPlayOnManualNavigate = true, - this.pauseAutoPlayInFiniteScroll = false, - this.pageViewKey, - this.enlargeStrategy = CenterPageEnlargeStrategy.scale, - this.enlargeFactor = 0.3, - this.disableCenter = false, - this.padEnds = true, - this.clipBehavior = Clip.hardEdge, - this.overlayColor, - this.enlargeCenterFixedOthers = false, - }); + CarouselOptions( + {this.height, + this.aspectRatio = 16 / 9, + this.viewportFraction = 0.8, + this.initialPage = 0, + this.enableInfiniteScroll = true, + this.animateToClosest = true, + this.reverse = false, + this.autoPlay = false, + this.autoPlayInterval = const Duration(seconds: 4), + this.autoPlayAnimationDuration = const Duration(milliseconds: 800), + this.autoPlayCurve = Curves.fastOutSlowIn, + this.enlargeCenterPage = false, + this.onPageChanged, + this.onScrolled, + this.scrollPhysics, + this.pageSnapping = true, + this.scrollDirection = Axis.horizontal, + this.pauseAutoPlayOnTouch = true, + this.pauseAutoPlayOnManualNavigate = true, + this.pauseAutoPlayInFiniteScroll = false, + this.pageViewKey, + this.enlargeStrategy = CenterPageEnlargeStrategy.scale, + this.enlargeFactor = 0.3, + this.disableCenter = false, + this.padEnds = true, + this.clipBehavior = Clip.hardEdge, + this.overlayColor, + this.enlargeCenterFixedOthers = false}); ///Generate new [CarouselOptions] based on old ones. - CarouselOptions copyWith({ - double? height, - double? aspectRatio, - double? viewportFraction, - int? initialPage, - bool? enableInfiniteScroll, - bool? reverse, - bool? autoPlay, - Duration? autoPlayInterval, - Duration? autoPlayAnimationDuration, - Curve? autoPlayCurve, - bool? enlargeCenterPage, - Function(int index, CarouselPageChangedReason reason)? onPageChanged, - ValueChanged? onScrolled, - ScrollPhysics? scrollPhysics, - bool? pageSnapping, - Axis? scrollDirection, - bool? pauseAutoPlayOnTouch, - bool? pauseAutoPlayOnManualNavigate, - bool? pauseAutoPlayInFiniteScroll, - PageStorageKey? pageViewKey, - CenterPageEnlargeStrategy? enlargeStrategy, - double? enlargeFactor, - bool? disableCenter, - Clip? clipBehavior, - bool? padEnds, - Color? overlayColor, - bool? enlargeCenterFixedOthers, - }) => + CarouselOptions copyWith( + {double? height, + double? aspectRatio, + double? viewportFraction, + int? initialPage, + bool? enableInfiniteScroll, + bool? reverse, + bool? autoPlay, + Duration? autoPlayInterval, + Duration? autoPlayAnimationDuration, + Curve? autoPlayCurve, + bool? enlargeCenterPage, + Function(int index, CarouselPageChangedReason reason)? onPageChanged, + ValueChanged? onScrolled, + ScrollPhysics? scrollPhysics, + bool? pageSnapping, + Axis? scrollDirection, + bool? pauseAutoPlayOnTouch, + bool? pauseAutoPlayOnManualNavigate, + bool? pauseAutoPlayInFiniteScroll, + PageStorageKey? pageViewKey, + CenterPageEnlargeStrategy? enlargeStrategy, + double? enlargeFactor, + bool? disableCenter, + Clip? clipBehavior, + bool? padEnds, + Color? overlayColor, + bool? enlargeCenterFixedOthers}) => CarouselOptions( height: height ?? this.height, aspectRatio: aspectRatio ?? this.aspectRatio, @@ -209,8 +207,7 @@ class CarouselOptions { reverse: reverse ?? this.reverse, autoPlay: autoPlay ?? this.autoPlay, autoPlayInterval: autoPlayInterval ?? this.autoPlayInterval, - autoPlayAnimationDuration: - autoPlayAnimationDuration ?? this.autoPlayAnimationDuration, + autoPlayAnimationDuration: autoPlayAnimationDuration ?? this.autoPlayAnimationDuration, autoPlayCurve: autoPlayCurve ?? this.autoPlayCurve, enlargeCenterPage: enlargeCenterPage ?? this.enlargeCenterPage, onPageChanged: onPageChanged ?? this.onPageChanged, @@ -219,10 +216,8 @@ class CarouselOptions { pageSnapping: pageSnapping ?? this.pageSnapping, scrollDirection: scrollDirection ?? this.scrollDirection, pauseAutoPlayOnTouch: pauseAutoPlayOnTouch ?? this.pauseAutoPlayOnTouch, - pauseAutoPlayOnManualNavigate: - pauseAutoPlayOnManualNavigate ?? this.pauseAutoPlayOnManualNavigate, - pauseAutoPlayInFiniteScroll: - pauseAutoPlayInFiniteScroll ?? this.pauseAutoPlayInFiniteScroll, + pauseAutoPlayOnManualNavigate: pauseAutoPlayOnManualNavigate ?? this.pauseAutoPlayOnManualNavigate, + pauseAutoPlayInFiniteScroll: pauseAutoPlayInFiniteScroll ?? this.pauseAutoPlayInFiniteScroll, pageViewKey: pageViewKey ?? this.pageViewKey, enlargeStrategy: enlargeStrategy ?? this.enlargeStrategy, enlargeFactor: enlargeFactor ?? this.enlargeFactor, @@ -230,7 +225,6 @@ class CarouselOptions { clipBehavior: clipBehavior ?? this.clipBehavior, padEnds: padEnds ?? this.padEnds, overlayColor: overlayColor ?? this.overlayColor, - enlargeCenterFixedOthers: - enlargeCenterFixedOthers ?? this.enlargeCenterFixedOthers, + enlargeCenterFixedOthers: enlargeCenterFixedOthers ?? this.enlargeCenterFixedOthers, ); } diff --git a/lib/carousel_slider.dart b/lib/carousel_slider.dart index c4cad49..4597a66 100644 --- a/lib/carousel_slider.dart +++ b/lib/carousel_slider.dart @@ -13,8 +13,7 @@ import 'utils.dart'; export 'carousel_controller.dart'; export 'carousel_options.dart'; -typedef Widget ExtendedIndexedWidgetBuilder( - BuildContext context, int index, int realIndex); +typedef Widget ExtendedIndexedWidgetBuilder(BuildContext context, int index, int realIndex); class CarouselSlider extends StatefulWidget { /// [CarouselOptions] to create a [CarouselState] with @@ -66,8 +65,7 @@ class CarouselSlider extends StatefulWidget { CarouselSliderState createState() => CarouselSliderState(_carouselController); } -class CarouselSliderState extends State - with TickerProviderStateMixin { +class CarouselSliderState extends State with TickerProviderStateMixin { final CarouselControllerImpl carouselController; Timer? timer; @@ -107,8 +105,7 @@ class CarouselSliderState extends State @override void initState() { super.initState(); - carouselState = - CarouselState(this.options, clearTimer, resumeTimer, this.changeMode); + carouselState = CarouselState(this.options, clearTimer, resumeTimer, this.changeMode); carouselState!.itemCount = widget.itemCount; carouselController.state = carouselState; @@ -144,8 +141,7 @@ class CarouselSliderState extends State int nextPage = carouselState!.pageController!.page!.round() + 1; int itemCount = widget.itemCount ?? widget.items!.length; - if (nextPage >= itemCount && - widget.options.enableInfiniteScroll == false) { + if (nextPage >= itemCount && widget.options.enableInfiniteScroll == false) { if (widget.options.pauseAutoPlayInFiniteScroll) { clearTimer(); return; @@ -155,8 +151,7 @@ class CarouselSliderState extends State carouselState!.pageController! .animateToPage(nextPage, - duration: widget.options.autoPlayAnimationDuration, - curve: widget.options.autoPlayCurve) + duration: widget.options.autoPlayAnimationDuration, curve: widget.options.autoPlayCurve) .then((_) => changeMode(previousReason)); }) : null; @@ -191,15 +186,13 @@ class CarouselSliderState extends State if (widget.options.height != null) { wrapper = Container(height: widget.options.height, child: child); } else { - wrapper = - AspectRatio(aspectRatio: widget.options.aspectRatio, child: child); + wrapper = AspectRatio(aspectRatio: widget.options.aspectRatio, child: child); } if (true == widget.disableGesture) { return NotificationListener( onNotification: (Notification notification) { - if (widget.options.onScrolled != null && - notification is ScrollUpdateNotification) { + if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) { widget.options.onScrolled!(carouselState!.pageController!.page); } return false; @@ -211,10 +204,8 @@ class CarouselSliderState extends State return RawGestureDetector( behavior: HitTestBehavior.opaque, gestures: { - _MultipleGestureRecognizer: - GestureRecognizerFactoryWithHandlers<_MultipleGestureRecognizer>( - () => _MultipleGestureRecognizer(), - (_MultipleGestureRecognizer instance) { + _MultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<_MultipleGestureRecognizer>( + () => _MultipleGestureRecognizer(), (_MultipleGestureRecognizer instance) { instance.onStart = (_) { onStart(); }; @@ -231,8 +222,7 @@ class CarouselSliderState extends State }, child: NotificationListener( onNotification: (Notification notification) { - if (widget.options.onScrolled != null && - notification is ScrollUpdateNotification) { + if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) { widget.options.onScrolled!(carouselState!.pageController!.page); } return false; @@ -251,11 +241,7 @@ class CarouselSliderState extends State return Center(child: child); } - Widget getEnlargeWrapper(Widget? child, - {double? width, - double? height, - double? scale, - required double itemOffset}) { + Widget getEnlargeWrapper(Widget? child, {double? width, double? height, double? scale, required double itemOffset}) { if (widget.options.enlargeStrategy == CenterPageEnlargeStrategy.height) { return SizedBox(child: child, width: width, height: height); } @@ -269,9 +255,7 @@ class CarouselSliderState extends State } return Transform.scale(child: child, scale: scale!, alignment: alignment); } - return Transform.scale( - scale: scale!, - child: Container(child: child, width: width, height: height)); + return Transform.scale(scale: scale!, child: Container(child: child, width: width, height: height)); } Widget getOverlayWrapper(Widget? child, double overlayOpacity) { @@ -336,15 +320,13 @@ class CarouselSliderState extends State itemCount: widget.options.enableInfiniteScroll ? null : widget.itemCount, key: widget.options.pageViewKey, onPageChanged: (int index) { - int currentPage = getRealIndex(index + carouselState!.initialPage, - carouselState!.realPage, widget.itemCount); + int currentPage = getRealIndex(index + carouselState!.initialPage, carouselState!.realPage, widget.itemCount); if (widget.options.onPageChanged != null) { widget.options.onPageChanged!(currentPage, mode); } }, itemBuilder: (BuildContext context, int idx) { - final int index = getRealIndex(idx + carouselState!.initialPage, - carouselState!.realPage, widget.itemCount); + final int index = getRealIndex(idx + carouselState!.initialPage, carouselState!.realPage, widget.itemCount); return AnimatedBuilder( animation: carouselState!.pageController!, @@ -357,57 +339,41 @@ class CarouselSliderState extends State // to display the visual effect double itemOffset = 0; double opacityValue = 0; - if (widget.options.enlargeCenterPage != null && - widget.options.enlargeCenterPage == true) { + if (widget.options.enlargeCenterPage != null && widget.options.enlargeCenterPage == true) { // pageController.page can only be accessed after the first build, // so in the first build we calculate the itemoffset manually var position = carouselState?.pageController?.position; - if (position != null && - position.hasPixels && - position.hasContentDimensions) { + if (position != null && position.hasPixels && position.hasContentDimensions) { var _page = carouselState?.pageController?.page; if (_page != null) { itemOffset = _page - idx; } } else { - BuildContext storageContext = carouselState! - .pageController!.position.context.storageContext; + BuildContext storageContext = carouselState!.pageController!.position.context.storageContext; final double? previousSavedPosition = - PageStorage.of(storageContext).readState(storageContext) - as double?; + PageStorage.of(storageContext).readState(storageContext) as double?; if (previousSavedPosition != null) { itemOffset = previousSavedPosition - idx.toDouble(); } else { - itemOffset = - carouselState!.realPage.toDouble() - idx.toDouble(); + itemOffset = carouselState!.realPage.toDouble() - idx.toDouble(); } } - final double enlargeFactor = - options.enlargeFactor.clamp(0.0, 1.0); - final offsetValue = options.enlargeCenterFixedOthers - ? itemOffset.abs().clamp(0, 1) - : itemOffset.abs(); - final num distortionRatio = - (1 - (offsetValue * enlargeFactor)).clamp(0.0, 1.0); - distortionValue = - Curves.easeOut.transform(distortionRatio as double); + final double enlargeFactor = options.enlargeFactor.clamp(0.0, 1.0); + final offsetValue = options.enlargeCenterFixedOthers ? itemOffset.abs().clamp(0, 1) : itemOffset.abs(); + final num distortionRatio = (1 - (offsetValue * enlargeFactor)).clamp(0.0, 1.0); + distortionValue = Curves.easeOut.transform(distortionRatio as double); opacityValue = 1 - distortionRatio; } - final double height = widget.options.height ?? - MediaQuery.of(context).size.width * - (1 / widget.options.aspectRatio); + final double height = + widget.options.height ?? MediaQuery.of(context).size.width * (1 / widget.options.aspectRatio); if (widget.options.scrollDirection == Axis.horizontal) { - return getCenterWrapper(getEnlargeWrapper( - getOverlayWrapper(child, opacityValue), - height: distortionValue * height, - scale: distortionValue, - itemOffset: itemOffset)); + return getCenterWrapper(getEnlargeWrapper(getOverlayWrapper(child, opacityValue), + height: distortionValue * height, scale: distortionValue, itemOffset: itemOffset)); } else { - return getCenterWrapper(getEnlargeWrapper( - getOverlayWrapper(child, opacityValue), + return getCenterWrapper(getEnlargeWrapper(getOverlayWrapper(child, opacityValue), width: distortionValue * MediaQuery.of(context).size.width, scale: distortionValue, itemOffset: itemOffset)); From e66ef389e20ec141506742dc3e81363bee3dc384 Mon Sep 17 00:00:00 2001 From: Khushboo Date: Tue, 6 Aug 2024 10:53:29 +0530 Subject: [PATCH 3/3] PR comments --- lib/carousel_options.dart | 59 ++++++++++++++++++++------------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/lib/carousel_options.dart b/lib/carousel_options.dart index d667207..430af90 100644 --- a/lib/carousel_options.dart +++ b/lib/carousel_options.dart @@ -138,35 +138,36 @@ class CarouselOptions { //This property defaults to false, if set to true, the center page will be enlarged and the other pages will be fixed. final bool enlargeCenterFixedOthers; - CarouselOptions( - {this.height, - this.aspectRatio = 16 / 9, - this.viewportFraction = 0.8, - this.initialPage = 0, - this.enableInfiniteScroll = true, - this.animateToClosest = true, - this.reverse = false, - this.autoPlay = false, - this.autoPlayInterval = const Duration(seconds: 4), - this.autoPlayAnimationDuration = const Duration(milliseconds: 800), - this.autoPlayCurve = Curves.fastOutSlowIn, - this.enlargeCenterPage = false, - this.onPageChanged, - this.onScrolled, - this.scrollPhysics, - this.pageSnapping = true, - this.scrollDirection = Axis.horizontal, - this.pauseAutoPlayOnTouch = true, - this.pauseAutoPlayOnManualNavigate = true, - this.pauseAutoPlayInFiniteScroll = false, - this.pageViewKey, - this.enlargeStrategy = CenterPageEnlargeStrategy.scale, - this.enlargeFactor = 0.3, - this.disableCenter = false, - this.padEnds = true, - this.clipBehavior = Clip.hardEdge, - this.overlayColor, - this.enlargeCenterFixedOthers = false}); + CarouselOptions({ + this.height, + this.aspectRatio = 16 / 9, + this.viewportFraction = 0.8, + this.initialPage = 0, + this.enableInfiniteScroll = true, + this.animateToClosest = true, + this.reverse = false, + this.autoPlay = false, + this.autoPlayInterval = const Duration(seconds: 4), + this.autoPlayAnimationDuration = const Duration(milliseconds: 800), + this.autoPlayCurve = Curves.fastOutSlowIn, + this.enlargeCenterPage = false, + this.onPageChanged, + this.onScrolled, + this.scrollPhysics, + this.pageSnapping = true, + this.scrollDirection = Axis.horizontal, + this.pauseAutoPlayOnTouch = true, + this.pauseAutoPlayOnManualNavigate = true, + this.pauseAutoPlayInFiniteScroll = false, + this.pageViewKey, + this.enlargeStrategy = CenterPageEnlargeStrategy.scale, + this.enlargeFactor = 0.3, + this.disableCenter = false, + this.padEnds = true, + this.clipBehavior = Clip.hardEdge, + this.overlayColor, + this.enlargeCenterFixedOthers = false, + }); ///Generate new [CarouselOptions] based on old ones.