11# flutter_carousel_widget
22
3- A customizable carousel slider widget in Flutter which supports infinite scrolling, auto scrolling, custom child widget , custom animations and pre-built indicators.
3+ A customizable carousel slider widget for Flutter, offering features such as infinite scrolling, auto- scrolling, custom child widgets , custom animations, pre-built indicators, expandable carousel widgets, and auto-sized child support .
44
5- [ ![ pub package] ( https://img.shields.io/pub/v/flutter_carousel_widget.svg?label=Version )] [ pub ]
6- [ ![ Stars] ( https://img.shields.io/github/stars/nixrajput/flutter_carousel_widget?label=Stars )] [ repo ]
7- [ ![ Forks] ( https://img.shields.io/github/forks/nixrajput/flutter_carousel_widget?label=Forks )] [ repo ]
8- [ ![ Watchers] ( https://img.shields.io/github/watchers/nixrajput/flutter_carousel_widget?label=Watchers )] [ repo ]
9- [ ![ Contributors] ( https://img.shields.io/github/contributors/nixrajput/flutter_carousel_widget?label=Contributors )] [ repo ]
5+ [ ![ pub package] ( https://img.shields.io/pub/v/flutter_carousel_widget.svg?label=Version&style=flat )] [ pub ]
6+ [ ![ Stars] ( https://img.shields.io/github/stars/nixrajput/flutter_carousel_widget?label=Stars&style=flat )] [ repo ]
7+ [ ![ Forks] ( https://img.shields.io/github/forks/nixrajput/flutter_carousel_widget?label=Forks&style=flat )] [ repo ]
8+ [ ![ Watchers] ( https://img.shields.io/github/watchers/nixrajput/flutter_carousel_widget?label=Watchers&style=flat )] [ repo ]
9+ [ ![ Contributors] ( https://img.shields.io/github/contributors/nixrajput/flutter_carousel_widget?label=Contributors&style=flat )] [ repo ]
1010
11- [ ![ GitHub release (latest by date)] ( https://img.shields.io/github/v/release/nixrajput/flutter_carousel_widget?label=Latest )] [ releases ]
12- [ ![ GitHub last commit] ( https://img.shields.io/github/last-commit/nixrajput/flutter_carousel_widget?label=Last+Commit )] [ repo ]
13- [ ![ GitHub issues] ( https://img.shields.io/github/issues/nixrajput/flutter_carousel_widget?label=Issues )] [ issues ]
14- [ ![ GitHub pull requests] ( https://img.shields.io/github/issues-pr/nixrajput/flutter_carousel_widget?label=Pull+Requests )] [ pulls ]
15- [ ![ GitHub Licence] ( https://img.shields.io/github/license/nixrajput/flutter_carousel_widget?label=Licence )] [ license ]
11+ [ ![ GitHub release (latest by date)] ( https://img.shields.io/github/v/release/nixrajput/flutter_carousel_widget?label=Latest&style=flat )] [ releases ]
12+ [ ![ GitHub last commit] ( https://img.shields.io/github/last-commit/nixrajput/flutter_carousel_widget?label=Last+Commit&style=flat )] [ repo ]
13+ [ ![ GitHub issues] ( https://img.shields.io/github/issues/nixrajput/flutter_carousel_widget?label=Issues&style=flat )] [ issues ]
14+ [ ![ GitHub pull requests] ( https://img.shields.io/github/issues-pr/nixrajput/flutter_carousel_widget?label=Pull+Requests&style=flat )] [ pulls ]
15+ [ ![ GitHub Licence] ( https://img.shields.io/github/license/nixrajput/flutter_carousel_widget?label=Licence&style=flat )] [ license ]
1616
1717## Table of Contents
1818
1919- [ flutter\_ carousel\_ widget] ( #flutter_carousel_widget )
2020 - [ Table of Contents] ( #table-of-contents )
2121 - [ Features] ( #features )
2222 - [ Demo] ( #demo )
23+ - [ Click here to experience the demo in a Web App] ( #click-here-to-experience-the-demo-in-a-web-app )
2324 - [ Installation] ( #installation )
2425 - [ Usage] ( #usage )
2526 - [ Using ` FlutterCarousel ` Widget] ( #using-fluttercarousel-widget )
2627 - [ Using ` ExpandableCarousel ` Widget] ( #using-expandablecarousel-widget )
27- - [ Option Customization] ( #option -customization )
28+ - [ Carousel Options Customization] ( #carousel-options -customization )
2829 - [ Build item widgets on demand] ( #build-item-widgets-on-demand )
2930 - [ Carousel Controller] ( #carousel-controller )
3031 - [ ` CarouselController ` methods] ( #carouselcontroller-methods )
@@ -33,7 +34,6 @@ A customizable carousel slider widget in Flutter which supports infinite scrolli
3334 - [ ` .jumpToPage(int page) ` ] ( #jumptopageint-page )
3435 - [ ` .animateToPage(int page, {Duration duration, Curve curve}) ` ] ( #animatetopageint-page-duration-duration-curve-curve )
3536 - [ Custom Slide Indicators] ( #custom-slide-indicators )
36- - [ Contributors] ( #contributors )
3737 - [ Contributing] ( #contributing )
3838 - [ License] ( #license )
3939 - [ Sponsor Me] ( #sponsor-me )
@@ -42,35 +42,30 @@ A customizable carousel slider widget in Flutter which supports infinite scrolli
4242
4343## Features
4444
45- - Infinite Scroll
46- - Custom Child Widget
47- - Auto Play
48- - Horizontal and Vertical Alignment
49- - Pre-built Carousel Indicators
50- - Custom Indicators
51- - Expandable Carousel Widget.
52- - Auto-sized child support.
45+ - ** Infinite Scrolling:** Seamlessly scroll through items in a loop.
46+ - ** Auto Scrolling:** Automatically advance slides at a configurable interval.
47+ - ** Custom Child Widgets:** Use any Flutter widget as a carousel item.
48+ - ** Custom Animations:** Apply custom animations to the carousel transitions.
49+ - ** Pre-built Indicators:** Easily add indicators to show the current slide position.
50+ - ** Expandable Carousel Widget:** Expand the carousel widget to fit the available space.
51+ - ** Auto-sized Child Support:** Automatically adjust the size of the carousel items to fit their content.
5352
5453## Demo
5554
5655![ Demo] ( https://raw.githubusercontent.com/nixrajput/flutter_carousel_widget/master/screenshots/flutter_carousel_widget_demo.gif )
5756
58- [ View Demo ] ( https://nixrajput.github.io/flutter_carousel_widget )
57+ ### [ Click here to experience the demo in a Web App ] ( https://nixrajput.github.io/flutter_carousel_widget )
5958
6059## Installation
6160
6261Add ` flutter_carousel_widget ` as a dependency in your ` pubspec.yaml ` file:
6362
64- ``` dart
63+ ``` yaml
6564dependencies :
6665 flutter_carousel_widget : ^latest_version
6766` ` `
6867
69- And import it:
70-
71- ``` dart
72- import 'package:flutter_carousel_widget/flutter_carousel_widget.dart';
73- ```
68+ Then run ` flutter pub get` to fetch the package.
7469
7570# # Usage
7671
@@ -129,35 +124,80 @@ ExpandableCarousel(
129124)
130125` ` `
131126
132- ### Option Customization
127+ # ## Carousel Options Customization
133128
134129` ` ` dart
135130FlutterCarousel(
136131 items: items,
137132 options: CarouselOptions(
138133 height: 400.0,
134+ // Sets the height of the carousel widget.
135+
139136 aspectRatio: 16 / 9,
137+ // Defines the aspect ratio of the carousel widget.
138+
140139 viewportFraction: 1.0,
140+ // Fraction of the viewport that each page should occupy.
141+
141142 initialPage: 0,
143+ // The initial page to display when the carousel is first shown.
144+
142145 enableInfiniteScroll: true,
146+ // Enables infinite looping of the carousel items.
147+
143148 reverse: false,
149+ // Reverses the order of the carousel items.
150+
144151 autoPlay: false,
152+ // Enables automatic scrolling through the carousel items.
153+
145154 autoPlayInterval: const Duration(seconds: 2),
155+ // Duration between automatic scrolls when autoPlay is enabled.
156+
146157 autoPlayAnimationDuration: const Duration(milliseconds: 800),
158+ // Duration of the animation when automatically scrolling between items.
159+
147160 autoPlayCurve: Curves.fastOutSlowIn,
161+ // Curve for the auto-play animation to control the animation's speed.
162+
148163 enlargeCenterPage: false,
164+ // Enlarges the center page of the carousel to make it more prominent.
165+
149166 controller: CarouselController(),
167+ // Controls the carousel programmatically.
168+
150169 onPageChanged: callbackFunction,
170+ // Callback function that is triggered when the page is changed.
171+
151172 pageSnapping: true,
173+ // Enables snapping of the carousel pages to ensure they stop at each item.
174+
152175 scrollDirection: Axis.horizontal,
176+ // Direction of the carousel scroll (horizontal or vertical).
177+
153178 pauseAutoPlayOnTouch: true,
179+ // Pauses auto-play when the user touches the carousel.
180+
154181 pauseAutoPlayOnManualNavigate: true,
182+ // Pauses auto-play when the user manually navigates through the carousel.
183+
155184 pauseAutoPlayInFiniteScroll: false,
185+ // Pauses auto-play in infinite scroll mode.
186+
156187 enlargeStrategy: CenterPageEnlargeStrategy.scale,
188+ // Strategy to enlarge the center page, such as scaling or zooming.
189+
157190 disableCenter: false,
191+ // Disables centering of the carousel items.
192+
158193 showIndicator: true,
159- floatingIndicator = true,
194+ // Shows an indicator to display the current slide position.
195+
196+ floatingIndicator: true,
197+ // Shows a floating indicator above the carousel.
198+
160199 slideIndicator: CircularSlideIndicator(),
200+ // Sets a custom indicator widget for the carousel slides.
161201 )
162202)
163203` ` `
@@ -276,27 +316,6 @@ class SlidePercentageIndicator implements SlideIndicator {
276316}
277317` ` `
278318
279- ## Contributors
280-
281- <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
282- <!-- prettier-ignore-start -->
283- <!-- markdownlint-disable -->
284- <table >
285- <tbody >
286- <tr>
287- <td align="center" valign="top" width="14.28%"><a href="https://nixrajput.vercel.app"><img src="https://avatars.githubusercontent.com/u/10887215?s=100&v=4" width="100px;" alt="Nikhil Rajput"/><br /><sub><b>Nikhil Rajput</b></sub></a><br /><a href="#question-nixrajput" title="Answering Questions">💬</a> <a href="https://github.com/nixrajput/flutter_carousel_widget/commits?author=nixrajput" title="Documentation">📖</a> <a href="#maintenance-nixrajput" title="Maintenance">🚧</a> <a href="#infra-nixrajput" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/nixrajput/flutter_carousel_widget/pulls?q=is%3Apr+reviewed-by%3Anixrajput" title="Reviewed Pull Requests">👀</a> <a href="#talk-nixrajput" title="Talks">📢</a></td>
288- <td align="center" valign="top" width="14.28%"><a href="https://github.com/DDavidPrime"><img src="https://avatars.githubusercontent.com/u/61236867?s=100&v=4" width="100px;" alt="David Djordjevic"/><br /><sub><b>David Djordjevic</b></sub></a><br /> <a href="https://github.com/nixrajput/flutter_carousel_widget/commits?author=DDavidPrime" title="Documentation">📖</a> <a href="https://github.com/nixrajput/flutter_carousel_widget/pulls?q=is%3Apr+reviewed-by%3ADDavidPrime" title="Reviewed Pull Requests">👀</a></td>
289- <td align="center" valign="top" width="14.28%"><a href="https://github.com/MatthewJones517"><img src="https://avatars.githubusercontent.com/u/35195921?s=100&v=4" width="100px;" alt="Matthew Jones"/><br /><sub><b>Matthew Jones</b></sub></a><br /><a href="https://github.com/nixrajput/flutter_carousel_widget/commits?author=MatthewJones517" title="Documentation">📖</a> <a href="https://github.com/nixrajput/flutter_carousel_widget/pulls?q=is%3Apr+reviewed-by%3AMatthewJones517" title="Reviewed Pull Requests">👀</a></td>
290- <td align="center" valign="top" width="14.28%"><a href="https://github.com/DjordjeMancic97"><img src="https://avatars.githubusercontent.com/u/58264548?s=100&v=4" width="100px;" alt="DjordjeMancic97"/><br /><sub><b>DjordjeMancic97</b></sub></a><br /><a href="https://github.com/nixrajput/flutter_carousel_widget/commits?author=DjordjeMancic97" title="Documentation">📖</a> <a href="https://github.com/nixrajput/flutter_carousel_widget/pulls?q=is%3Apr+reviewed-by%3ADjordjeMancic97" title="Reviewed Pull Requests">👀</a></td>
291- </tr>
292- </tbody >
293- </table >
294-
295- <!-- markdownlint-restore -->
296- <!-- prettier-ignore-end -->
297-
298- <!-- ALL-CONTRIBUTORS-LIST:END -->
299-
300319# # Contributing
301320
302321If you would like to contribute to this project, feel free to fork the repository, make your changes, and submit a pull request. Please follow the guidelines in the [CONTRIBUTING.md](CONTRIBUTING.md) file.
@@ -307,19 +326,26 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
307326
308327# # Sponsor Me
309328
310- - By sponsoring my efforts, you're not merely contributing to the development of my projects; you're investing in its growth and sustainability.
311- - Your support empowers me to dedicate more time and resources to improving the project's features, addressing issues, and ensuring its continued relevance in the rapidly evolving landscape of technology.
312- - Your sponsorship directly fuels innovation, fosters a vibrant community, and helps maintain the project's high standards of quality. Together, we can shape the future of the projects and make a lasting impact in the open-source community.
313- - Thank you for considering sponsoring my work!
329+ By sponsoring my efforts, you're not merely contributing to the development of my projects; you're investing in its growth and sustainability.
330+
331+ Your support empowers me to dedicate more time and resources to improving the project's features, addressing issues, and ensuring its continued relevance in the rapidly evolving landscape of technology.
332+
333+ Your sponsorship directly fuels innovation, fosters a vibrant community, and helps maintain the project's high standards of quality. Together, we can shape the future of the projects and make a lasting impact in the open-source community.
334+
335+ Thank you for considering sponsoring my work!
314336
315337[](https://github.com/sponsors/nixrajput)
316338
339+ [](https://ko-fi.com/nixrajput)
340+
341+ [](https://www.buymeacoffee.com/nixrajput)
342+
317343# # Connect With Me
318344
319345[][github]
320346[][linkedin]
321347[][instagram]
322- [ ![ Twitter: nixrajput07] ( https://img.shields.io/badge/nixrajput -EFF7F6?logo=X&logoColor=333&link=https://x.com/nixrajput )] [ twitter ]
348+ [][twitter]
323349[][telegram]
324350[![Gmail :
[email protected] ](https://img.shields.io/badge/[email protected] ?logo=Gmail&link=mailto:[email protected] )][gmail]325351
0 commit comments