Skip to content

Commit bec6cdb

Browse files
committed
Update readme to reflect new feature and changes
1 parent feb06e2 commit bec6cdb

File tree

1 file changed

+58
-3
lines changed

1 file changed

+58
-3
lines changed

README.md

Lines changed: 58 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -276,11 +276,66 @@ Jump to the given page.
276276

277277
Animate to the given page.
278278

279-
## Custom Slide Indicators
280279

281-
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.
280+
## Predefined Slide Indicators
281+
282+
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.
283+
284+
### Slide Indicator Options Customization
285+
286+
``` dart
287+
FlutterCarousel(
288+
...
289+
options: CarouselOptions(
290+
...
291+
slideIndicator: CircularSlideIndicator(
292+
slideIndicatorOptions: SlideIndicatorOptions(
293+
/// The alignment of the indicator.
294+
alignment: Alignment.bottomCenter,
295+
296+
/// The color of the currently active item indicator.
297+
currentIndicatorColor: Colors.white,
298+
299+
/// The background color of all inactive item indicators.
300+
indicatorBackgroundColor: Colors.white.withOpacity(0.5),
301+
302+
/// The border color of all item indicators.
303+
indicatorBorderColor: Colors.white,
304+
305+
/// The border width of all item indicators.
306+
indicatorBorderWidth: 1,
307+
308+
/// The radius of all item indicators.
309+
indicatorRadius: 6,
310+
311+
/// The spacing between each item indicator.
312+
itemSpacing: 20,
313+
314+
/// The padding of the indicator.
315+
padding: const EdgeInsets.all(8.0),
316+
317+
/// The decoration of the indicator halo.
318+
haloDecoration: BoxDecoration(
319+
borderRadius: const BorderRadius.all(Radius.circular(15.0)),
320+
color: Colors.black.withOpacity(0.5)),
321+
322+
/// The padding of the indicator halo.
323+
haloPadding: const EdgeInsets.all(8.0),
324+
325+
/// Whether to enable the indicator halo.
326+
enableHalo: true,
327+
328+
/// Whether to enable the animation. Only used in [CircularStaticIndicator] and [SequentialFillIndicator].
329+
enableAnimation: true),
330+
),
331+
332+
),
333+
);
334+
```
335+
336+
## Custom Slide Indicators
282337

283-
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.
338+
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.
284339

285340
The following example implements an indicator which tells the percentage of the slide the user is on:
286341

0 commit comments

Comments
 (0)