In this post, you will learn about the Flutter carousel_slider package. Using this package you can easily create your own image carousel or any other widget carousel.
Also Recommend to read this tutorial: Flutter Swiper Example
Contents
- 1. Flutter Carousel Slider Example – A simple one
- 2.Flutter Carousel Slider Builder Example
- 3. Flutter Image Carousel Example
- 4. Custom Image Carousel
- 5. Carousel Slider FullScreen Example.
- 6. Flutter Vertical Image Carousel Example.
- 7. Image Carousel With Indicator Example
- 8. Vertical Carousel With Indicator Example
okay… Let’s start with a simple example.
Flutter Carousel Slider Example – A simple one
The carousel_slider package supports Android, iOS, Web, and Desktop. So let’s show it through the carousel.
Let’s create a Flutter project in Android Studio or Visual Studio.
open pubspec.yaml file, and paste the package dependency.
carousel_slider: ^3.0.0 cupertino_icons: ^1.0.0
Open the main.dart file and paste the below code.
- CarouselSlider items property holds the children.
- In this example, childrens are just Text widget wrapped with Padding widget.
- By default, autoplay set to false.
import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Carousel Slider', debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: Text('Flutter Carousel Slider Example'), ), body: CarouselSlider( items: [ Padding( padding: const EdgeInsets.all(20.0), child: Text('Android'), ), Padding( padding: const EdgeInsets.all(20.0), child: Text('iOS'), ), Padding( padding: const EdgeInsets.all(20.0), child: Text('Desktop'), ), Padding( padding: const EdgeInsets.all(20.0), child: Text('Web'), ) ], //Slider Container properties options: CarouselOptions( autoPlay: true, ), ), ), ); } }
Carousel Slider Builder Example
In this example, we will create the same above app using CarouselSlider.builder().
open pubspec.yaml file, and paste the package dependency.
carousel_slider: ^3.0.0 cupertino_icons: ^1.0.0
open main.dart file, and paste the below code.
itemCount: You need to specify how many items are there on your carousel.- itemBuilder will help you to build each carousel item.
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; void main() { runApp( MaterialApp( home: MyApp(), ), ); } class MyApp extends StatelessWidget { final items = ["Android", "iOS", "Desktop", "Web"]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Carousel Slider Builder Example'), ), body: CarouselSlider.builder( options: CarouselOptions( height: 100.0, autoPlay: true, ), itemCount: items.length, itemBuilder: (context, itemIndex, realIndex) { return Padding( padding: const EdgeInsets.all(8.0), child: Text(items[itemIndex]), ); }, ), ); } }
Flutter Image Carousel Example
Let’s make a Image Slider using Carousel Slider Widget in Flutter. In this example, we load images from internet.
paste the dependency in pubspec.yaml file just like below.
cupertino_icons: ^1.0.0 carousel_slider: ^3.0.0
- imagesList holds image URL items.
- CarouselSlider Uses Image.network() to show each URLs.
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; void main() { runApp( MaterialApp( home: MyApp(), ), ); } class MyApp extends StatelessWidget { final List<String> imagesList = [ 'https://cdn.pixabay.com/photo/2017/12/10/14/47/piza-3010062_1280.jpg', 'https://cdn.pixabay.com/photo/2016/06/07/01/49/ice-cream-1440830_1280.jpg', 'https://cdn.pixabay.com/photo/2017/12/27/07/07/brownie-3042106_1280.jpg', 'https://cdn.pixabay.com/photo/2018/02/25/07/15/food-3179853_1280.jpg', 'https://cdn.pixabay.com/photo/2015/10/26/11/10/honey-1006972_1280.jpg', ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Image Carousel Example '), ), body: CarouselSlider( options: CarouselOptions( autoPlay: true, ), items: imagesList .map( (item) => Center( child: Image.network( item, fit: BoxFit.cover, ), ), ) .toList(), ), ); } }
Custom Flutter Image Carousel
Let’s use some CarouselOptions properties and customize your slider.
- viewportFraction customize the size of the item.
- enlargeCenterPage: enlarge the centered item if it set to true.
CarouselSlider( options: CarouselOptions( viewportFraction: 0.6, autoPlayAnimationDuration: const Duration(milliseconds: 100), autoPlay: true, enlargeCenterPage: true, ), items: imagesList .map( (item) => Center( child: Image.network( item, fit: BoxFit.cover, ), ), ) .toList(), ),
Flutter Image Carousel FullScreen Example
We will use MediaQuery to find screen height of the device, and specify to carousel slider.
I assume you might paste the dependency in pubspec.yaml, if you don’t, check above example or paste the latest carousel_slider dependency.
- final height = MediaQuery.of(context).size.height – gets Screen Height of the device.
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; void main() { runApp( MaterialApp( home: MyApp(), ), ); } class MyApp extends StatelessWidget { final List<String> imagesList = [ 'https://cdn.pixabay.com/photo/2020/11/01/23/22/breakfast-5705180_1280.jpg', 'https://cdn.pixabay.com/photo/2016/11/18/19/00/breads-1836411_1280.jpg', 'https://cdn.pixabay.com/photo/2019/01/14/17/25/gelato-3932596_1280.jpg', 'https://cdn.pixabay.com/photo/2017/04/04/18/07/ice-cream-2202561_1280.jpg', 'https://cdn.pixabay.com/photo/2019/01/14/17/25/gelato-3932596_1280.jpg' ]; @override Widget build(BuildContext context) { final height = MediaQuery.of(context).size.height; return Scaffold( appBar: AppBar( title: Text('Flutter Carousel FullScreen Example'), ), body: CarouselSlider( options: CarouselOptions( height: height, autoPlay: true, ), items: imagesList .map( (item) => Container( child: Center( child: Image.network( item, fit: BoxFit.cover, height: height, ), ), ), ) .toList(), ), ); } }
Flutter Vertical Image Carousel Example
- scrollDirection: Axis.vertical – It changes the scroll direction of Carousel Slider.
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; final List<String> imagesList = [ 'https://cdn.pixabay.com/photo/2020/11/01/23/22/breakfast-5705180_1280.jpg', 'https://cdn.pixabay.com/photo/2016/11/18/19/00/breads-1836411_1280.jpg', 'https://cdn.pixabay.com/photo/2019/01/14/17/25/gelato-3932596_1280.jpg', 'https://cdn.pixabay.com/photo/2017/04/04/18/07/ice-cream-2202561_1280.jpg', ]; final List<String> titles = [ ' Coffee ', ' Bread ', ' Gelato ', ' Ice Cream ', ]; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { int _currentIndex = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Vertical Carousel With Image'), ), body: CarouselSlider( options: CarouselOptions( autoPlay: true, enlargeCenterPage: true, scrollDirection: Axis.vertical, onPageChanged: (index, reason) { setState( () { _currentIndex = index; }, ); }, ), items: imagesList .map( (item) => Padding( padding: const EdgeInsets.all(8.0), child: Card( margin: EdgeInsets.only( top: 10.0, bottom: 10.0, ), elevation: 6.0, shadowColor: Colors.redAccent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30.0), ), child: ClipRRect( borderRadius: BorderRadius.all( Radius.circular(30.0), ), child: Stack( children: <Widget>[ Image.network( item, fit: BoxFit.cover, width: double.infinity, ), Center( child: Text( '${titles[_currentIndex]}', style: TextStyle( fontSize: 24.0, fontWeight: FontWeight.bold, backgroundColor: Colors.black45, color: Colors.white, ), ), ), ], ), ), ), ), ) .toList(), ), ), ); } }
Flutter Image Carousel with Indicator Demo
In this final example, you will create an image carousel with indicator.
Do not forget to add dependency in pubspec.yaml,
carousel_slider: ^3.0.0 cupertino_icons: ^1.0.0
open main.dart file, paste the below code.
- When a page or image changes, onPageChanged gets called and sets _currentIndex
- Using Row’s mainAxisAlignment, property you can change the location of Indicator. Here, I have used mainAxisAlignment: MainAxisAlignment.center – You can change it into MainAxisAlignment.start or any other values.
import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; final List<String> imagesList = [ 'https://cdn.pixabay.com/photo/2020/11/01/23/22/breakfast-5705180_1280.jpg', 'https://cdn.pixabay.com/photo/2016/11/18/19/00/breads-1836411_1280.jpg', 'https://cdn.pixabay.com/photo/2019/01/14/17/25/gelato-3932596_1280.jpg', 'https://cdn.pixabay.com/photo/2017/04/04/18/07/ice-cream-2202561_1280.jpg', ]; final List<String> titles = [ ' Coffee ', ' Bread ', ' Gelato ', ' Ice Cream ', ]; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { int _currentIndex = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Carousel with indicator demo'), ), body: Column( children: [ CarouselSlider( options: CarouselOptions( autoPlay: true, // enlargeCenterPage: true, //scrollDirection: Axis.vertical, onPageChanged: (index, reason) { setState( () { _currentIndex = index; }, ); }, ), items: imagesList .map( (item) => Padding( padding: const EdgeInsets.all(8.0), child: Card( margin: EdgeInsets.only( top: 10.0, bottom: 10.0, ), elevation: 6.0, shadowColor: Colors.redAccent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30.0), ), child: ClipRRect( borderRadius: BorderRadius.all( Radius.circular(30.0), ), child: Stack( children: <Widget>[ Image.network( item, fit: BoxFit.cover, width: double.infinity, ), Center( child: Text( '${titles[_currentIndex]}', style: TextStyle( fontSize: 24.0, fontWeight: FontWeight.bold, backgroundColor: Colors.black45, color: Colors.white, ), ), ), ], ), ), ), ), ) .toList(), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: imagesList.map((urlOfItem) { int index = imagesList.indexOf(urlOfItem); return Container( width: 10.0, height: 10.0, margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0), decoration: BoxDecoration( shape: BoxShape.circle, color: _currentIndex == index ? Color.fromRGBO(0, 0, 0, 0.8) : Color.fromRGBO(0, 0, 0, 0.3), ), ); }).toList(), ) ], ), ), ); } }
Vertical Image Slider with Indicator
In this example, we just add two properties exactly with above example.
scrollDirection: Axis.vertical, enlargeCenterPage: true,
Okay…That’s all for now. If you like this post, please share it with your family and friends.
Thank you.
For more Information: Carousel_Slider