Loading repository data…
nixrajput / repository
A customizable Flutter carousel widget with infinite scrolling, auto-scrolling, pre-built indicators, expandable widgets, auto-sized child support, and enlarged center page.
A customizable carousel widget for Flutter, offering features such as infinite scrolling, auto-scrolling, custom child widgets, pre-built indicators, expandable child widgets, auto-sized child support, and enlarged center page.
[
][pub]
[
[
[
In version 3.0.0 of the package, the following breaking changes have been introduced:
FlutterCarousel Changes:
ExpandableCarousel Changes:
If you have been using CarouselOptions, CarouselController, and CarouselState for both FlutterCarousel and ExpandableCarousel, you will need to update your code to use the newly introduced classes specific to each carousel type.
Add flutter_carousel_widget as a dependency in your pubspec.yaml file:
dependencies:
flutter_carousel_widget: ^latest_version
Then run flutter pub get to fetch the package.
FlutterCarousel WidgetFlutter Carousel is a carousel widget which supports infinite scrolling, auto scrolling, custom child widget, custom animations and pre-built indicators.
FlutterCarousel(
options: FlutterCarouselOptions(
height: 400.0,
showIndicator: true,
slideIndicator: CircularSlideIndicator(),
),
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text('text $i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
)
ExpandableCarousel WidgetExpandable Carousel is a carousel widget which automatically expands to the size of its child widget. It is useful when you want to show a carousel with different sized child widgets.
ExpandableCarousel(
options: ExpandableCarouselOptions(
autoPlay: true,
autoPlayInterval: const Duration(seconds: 2),
),
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text('text $i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
)
FlutterCarousel(
items: items,
options: FlutterCarouselOptions(
height: 400.0,
// Sets the height of the carousel widget.
aspectRatio: 16 / 9,
// Defines the aspect ratio of the carousel widget.
viewportFraction: 1.0,
// Fraction of the viewport that each page should occupy.
initialPage: 0,
// The initial page to display when the carousel is first shown.
enableInfiniteScroll: true,
// Enables infinite looping of the carousel items.
reverse: false,
// Reverses the order of the carousel items.
autoPlay: false,
// Enables automatic scrolling through the carousel items.
autoPlayInterval: const Duration(seconds: 2),
// Duration between automatic scrolls when autoPlay is enabled.
autoPlayAnimationDuration: const Duration(milliseconds: 800),
// Duration of the animation when automatically scrolling between items.
autoPlayCurve: Curves.fastOutSlowIn,
// Curve for the auto-play animation to control the animation's speed.
enlargeCenterPage: false,
// Enlarges the center page of the carousel to make it more prominent.
controller: CarouselController(),
// Controls the carousel programmatically.
onPageChanged: callbackFunction,
// Callback function that is triggered when the page is changed.
pageSnapping: true,
// Enables snapping of the carousel pages to ensure they stop at each item.
scrollDirection: Axis.horizontal,
// Direction of the carousel scroll (horizontal or vertical).
pauseAutoPlayOnTouch: true,
// Pauses auto-play when the user touches the carousel.
pauseAutoPlayOnManualNavigate: true,
// Pauses auto-play when the user manually navigates through the carousel.
pauseAutoPlayInFiniteScroll: false,
// Pauses auto-play in infinite scroll mode.
enlargeStrategy: CenterPageEnlargeStrategy.scale,
// Strategy to enlarge the center page, such as scaling or zooming.
disableCenter: false,
// Disables centering of the carousel items.
showIndicator: true,
// Shows an indicator to display the current slide position.
floatingIndicator: true,
// Shows a floating indicator above the carousel.
slideIndicator: CircularSlideIndicator(),
// Sets a custom indicator widget for the carousel slides.
)
)
This method will save memory by building items once it becomes necessary. This way they won't be built if they're not currently meant to be visible on screen. It can be used to build different child item widgets related to content or by item index.
FlutterCarousel.builder(
itemCount: 15,
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
Container(
child: Text(itemIndex.toString()),
),
)
ExpandableCarousel.builder(
itemCount: 15,
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
Container(
child: Text(itemIndex.toString()),
),
)
In order to manually control the PageView's position, you can create your own FlutterCarouselController, and pass it to FlutterCarouselOptions. Then you can use the FlutterCarouselController instance to manipulate the position.
class CarouselDemo extends StatelessWidget {
FlutterCarouselController buttonCarouselController = FlutterCarouselController();
@override
Widget build(BuildContext context) => Column(
children: [
FlutterCarousel(
items: child,
options: FlutterCarouselOptions(
autoPlay: false,
controller: buttonCarouselController,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
initialPage: 2,
),
),
RaisedButton(
onPressed: () => buttonCarouselController.nextPage(
duration: Duration(milliseconds: 300), curve: Curves.linear),
child: Text('→'),
)
]
);
}
FlutterCarouselController methods.nextPage({Duration duration, Curve curve})Animate to the next page
.previousPage({Duration duration, Curve curve})Animate to the previous page
.jumpToPage(int page)Jump to the given page.
Selected from shared topics, language and repository description—not editorial ratings.
GalaxyPhoenix716 /
A beautiful, highly customizable 3D coverflow-style carousel for Flutter. Create immersive experiences with smooth perspective effects, overlapping cards, dynamic scaling, and effortless programmatic navigation.