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
