flutter_carousel_widget
A customizable carousel slider widget in Flutter.
Features
- Infinite Scroll
- Custom Child Widget
- Auto Play
- Horizontal and Vertical Alignment
- Customization
- Many more features are coming soon
Installation
Add flutter_carousel_widget as a dependency in your pubspec.yaml file:
dependencies:
flutter_carousel_widget: ^0.0.1
And import it:
import 'package:flutter_carousel_widget/flutter_carousel_widget.dart';
Usage
Simply create a FlutterCarousel widget, and pass the required params:
FlutterCarousel(
options: CarouselOptions(height: 400.0),
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(),
)
Option Customization
FlutterCarousel(
items: items,
options: CarouselOptions(
height: 400,
aspectRatio: 16/9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
onPageChanged: callbackFunction,
scrollDirection: Axis.horizontal,
)
)
Build item widgets on demand
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()),
),
)
Carousel controller
In order to manually control the pageview's position, you can create your own CarouselController, and pass it to CarouselSlider. Then you can use the CarouselController instance to manipulate the position.
class CarouselDemo extends StatelessWidget {
CarouselController buttonCarouselController = CarouselController();
@override
Widget build(BuildContext context) => Column(
children: <Widget>[
FlutterCarousel(
items: child,
carouselController: buttonCarouselController,
options: CarouselOptions(
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
initialPage: 2,
),
),
RaisedButton(
onPressed: () => buttonCarouselController.nextPage(
duration: Duration(milliseconds: 300), curve: Curves.linear),
child: Text('→'),
)
]
);
}
CarouselController 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.
.animateToPage(int page, {Duration duration, Curve curve})
Animate to the given page.
Screenshots
Basic Flutter Carousel:
Enlarge Center Widget Flutter Carousel:
Fullscreen Flutter Carousel:
Manually Controlled Flutter Carousel:
Flutter Carousel with indicator:
Flutter Carousel with multiple item in one widget:
Credits
This package is initially inspired from carousel_slider package. Thanks serenader.me for the package. I am extended this package with some extra toppings and new features.
Connect With Me
within that card, there's a dynamically loaded widget, sometimes loaded, sometimes not.
because the current implementation forced children's height to be the same as the height set on the option, it makes a blank space within the card. would be great if the carousel doesn't force the height at least. and even better if there's option for dynamic height.
40 Dec 29, 2022
15 Sep 5, 2022
1 Sep 17, 2022
22 Dec 29, 2022
37 Dec 28, 2022
30 Jun 10, 2022
9 Dec 12, 2022
1 Jun 8, 2022
185 Dec 13, 2022
193 Nov 14, 2022
3 Oct 1, 2022
4 Dec 22, 2022
67 Oct 2, 2022
226 Nov 3, 2022
51 Dec 23, 2022
11 Sep 29, 2021
50 Jan 6, 2022
2 May 17, 2020
15 Jul 7, 2021