Merge pull request #49 from ProV1X/feature/slide-indicator-halo

Docs & Example: Slide Indicator Halo - Implementation & Usage Guide

Author: nixrajput

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:
 

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<CarouselWithIndicatorHalo> createState() =>
+      _CarouselWithIndicatorHaloState();
+}
+
+class _CarouselWithIndicatorHaloState extends State<CarouselWithIndicatorHalo> {
+  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: <Widget>[
+                  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);