diff --git a/README.md b/README.md index 2aefd03..b28574d 100644 --- a/README.md +++ b/README.md @@ -276,11 +276,66 @@ Jump to the given page. Animate to the given page. -## Custom Slide Indicators -The `flutter_carousel_widget` package comes with a few [predefined slide indicators](https://github.com/nixrajput/flutter_carousel_widget/tree/master/lib/src/indicators) with their own unique behaviors. This helps drastically and brings focus towards the actual implementation of your carousel widget. +## Predefined Slide Indicators + +The `flutter_carousel_widget` package comes with a few [predefined slide indicators](https://github.com/nixrajput/flutter_carousel_widget/tree/master/lib/src/indicators) each with its own distinct behavior. To customize the slide indicators, you can pass an instance of `SlideIndicatorOptions` to the indicator you're using. + +### Slide Indicator Options Customization + +``` dart + FlutterCarousel( + ... + options: CarouselOptions( + ... + slideIndicator: CircularSlideIndicator( + slideIndicatorOptions: SlideIndicatorOptions( + /// The alignment of the indicator. + alignment: Alignment.bottomCenter, + + /// The color of the currently active item indicator. + currentIndicatorColor: Colors.white, + + /// The background color of all inactive item indicators. + indicatorBackgroundColor: Colors.white.withOpacity(0.5), + + /// The border color of all item indicators. + indicatorBorderColor: Colors.white, + + /// The border width of all item indicators. + indicatorBorderWidth: 1, + + /// The radius of all item indicators. + indicatorRadius: 6, + + /// The spacing between each item indicator. + itemSpacing: 20, + + /// The padding of the indicator. + padding: const EdgeInsets.all(8.0), + + /// The decoration of the indicator halo. + haloDecoration: BoxDecoration( + borderRadius: const BorderRadius.all(Radius.circular(15.0)), + color: Colors.black.withOpacity(0.5)), + + /// The padding of the indicator halo. + haloPadding: const EdgeInsets.all(8.0), + + /// Whether to enable the indicator halo. + enableHalo: true, + + /// Whether to enable the animation. Only used in [CircularStaticIndicator] and [SequentialFillIndicator]. + enableAnimation: true), + ), + + ), + ); +``` + +## Custom Slide Indicators -However, there might be cases where you want to control the look or behavior of the slide indicator or implement a totally new one. You can do that by implementing the `SlideIndicator` contract. +There might be cases where you want to control the look or behavior of the slide indicator or implement a totally new one. You can do that by implementing the `SlideIndicator` contract. The following example implements an indicator which tells the percentage of the slide the user is on: diff --git a/example/lib/main.dart b/example/lib/main.dart index 5e21097..41a077d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -69,6 +69,7 @@ class FlutterCarouselWidgetDemo extends StatelessWidget { '/enlarge': (ctx) => const EnlargeStrategyDemo(), '/manual': (ctx) => const ManuallyControlledSlider(), '/fullscreen': (ctx) => const FullscreenSliderDemo(), + '/indicator_halo': (ctx) => const CarouselWithIndicatorHalo(), '/indicator': (ctx) => const CarouselWithIndicatorDemo(), '/multiple': (ctx) => const MultipleItemDemo(), '/expandable': (ctx) => const ExpandableCarouselDemo(), @@ -154,6 +155,7 @@ class CarouselDemoHome extends StatelessWidget { DemoItem('Enlarge Strategy Demo', '/enlarge'), DemoItem('Manually Controlled Slider', '/manual'), DemoItem('Fullscreen Carousel Slider', '/fullscreen'), + DemoItem('Carousel with Indicator Halo', '/indicator_halo'), DemoItem('Carousel with Custom Indicator Demo', '/indicator'), DemoItem('Multiple Item in One Screen Demo', '/multiple'), DemoItem('Expandable Carousel Demo', '/expandable'), @@ -405,6 +407,105 @@ class FullscreenSliderDemo extends StatelessWidget { } } +class CarouselWithIndicatorHalo extends StatefulWidget { + const CarouselWithIndicatorHalo({Key? key}) : super(key: key); + + @override + State createState() => + _CarouselWithIndicatorHaloState(); +} + +class _CarouselWithIndicatorHaloState extends State { + bool useCustomIndicatorOptions = false; + + SlideIndicatorOptions defaultOptions = const SlideIndicatorOptions( + enableHalo: true, + ); + + SlideIndicatorOptions customOptions = const SlideIndicatorOptions( + enableHalo: true, + currentIndicatorColor: Colors.white, + haloDecoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Color(0xFF9B2BFF), + Color(0xFF2BFF88), + ], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + borderRadius: BorderRadius.all(Radius.circular(15.0)), + ), + ); + + @override + Widget build(BuildContext context) { + final deviceSize = MediaQuery.of(context).size; + + return Scaffold( + appBar: AppBar(title: const Text('Carousel with Indicator Halo')), + body: Center( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + children: [ + const Spacer( + flex: 1, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ElevatedButton( + onPressed: () { + setState(() { + useCustomIndicatorOptions = false; + }); + }, + child: const Text("Default Halo")), + ElevatedButton( + onPressed: () { + setState(() { + useCustomIndicatorOptions = true; + }); + }, + child: const Text("Custom Halo")), + ], + ), + const SizedBox(height: 20), + Container( + constraints: BoxConstraints( + maxHeight: MediaQuery.of(context).size.width, + ), + child: FlutterCarousel( + options: CarouselOptions( + autoPlay: true, + autoPlayInterval: const Duration(seconds: 3), + disableCenter: true, + viewportFraction: deviceSize.width > 800.0 ? 0.8 : 1.0, + height: deviceSize.height * 0.45, + indicatorMargin: 12.0, + enableInfiniteScroll: true, + slideIndicator: CircularSlideIndicator( + slideIndicatorOptions: useCustomIndicatorOptions + ? customOptions + : defaultOptions, + ), + initialPage: 2, + ), + items: sliders, + ), + ), + const Spacer( + flex: 5, + ) + ], + ), + ), + ), + ); + } +} + class CarouselWithIndicatorDemo extends StatefulWidget { const CarouselWithIndicatorDemo({Key? key}) : super(key: key);