Exploring Flutter Carousel Slider
A carousel slider is slideshow component of images or texts etc. Flutter provides carousel slider package to use carousel widgets in applications. You can also checkout sample at HERE.
In this article, I will show you how you can use different custom carousel sliders in your flutter apps.
Add below line under dependencies section in your pubspec file
carousel_slider: ^2.1.0
Introduction Of Carousel Widget
There are three important parameters in carousel widget: items, carouselController, options. In items param, We need to pass an array of widgets which are displayed in slider. Using your own carousel controller, You can control slider page’s position manually. CarouselOptions widget is passed to options parameter. CarouselOptions widget is used to customize slider with use of different parameters like autoplay, height etc.
Basic Carousel Slider
In this, I simply give height of slide page and autoplay true in carousel options widget. Autoplay means everytime slide is automatically scrolled.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class Basic extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: CarouselSlider(
options: CarouselOptions(height:250,autoPlay: true),
items: [
MyImageView("images/nature1.jpg"),
MyImageView("images/nature2.jpg"),
MyImageView("images/nature3.jpg"),
MyImageView("images/nature4.jpg"),
MyImageView("images/nature5.jpg"),
MyImageView("images/nature6.jpg"),
]
),
)
);
}
}
class MyImageView extends StatelessWidget{
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath,),
)
);
}
}
Center Page Large Slider
We can change size of center page by giving value true to enlargeCenterPage property of carousel widget.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class CenterPageLarge extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: CarouselSlider(
options: CarouselOptions(height:250,autoPlay: true,enlargeCenterPage: true),
items: [
MyImageView("images/nature1.jpg"),
MyImageView("images/nature2.jpg"),
MyImageView("images/nature3.jpg"),
MyImageView("images/nature4.jpg"),
MyImageView("images/nature5.jpg"),
MyImageView("images/nature6.jpg"),
]
),
)
);
}
}
class MyImageView extends StatelessWidget{
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath,),
)
);
}
}
Full Screen Slider
To achieve full screen in carousel widget, First you need to get device screen height. Then you need to pass it to height parameter of carousel options widget.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class FullScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
var getScreenHeight = MediaQuery.of(context).size.height;
// TODO: implement build
return Scaffold(
body: Center(
child: CarouselSlider(
options: CarouselOptions(height: getScreenHeight,autoPlay: true,viewportFraction: 1.0),
items: [
MyImageView("images/nature1.jpg"),
MyImageView("images/nature2.jpg"),
MyImageView("images/nature3.jpg"),
MyImageView("images/nature4.jpg"),
MyImageView("images/nature5.jpg"),
MyImageView("images/nature6.jpg"),
]
),
)
);
}
}
class MyImageView extends StatelessWidget{
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath,),
)
);
}
}
Carousel Slider With Custom Indicator
In Android, We used viewpager to display slides with indicator. In Flutter, We need to create indicator circle shape. We will display number of created views as number of slides. So Whenever page is changed, Particular view of selected and deselected page is changed. In this we use CarouselSlider.builder instead of CarouselSlider widget.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class CustomIndicator extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return CustomIndicatorState();
}
}
class CustomIndicatorState extends State<CustomIndicator> {
int currentPos = 0;
List<String> listPaths = [
"images/nature1.jpg",
"images/nature2.jpg",
"images/nature3.jpg",
"images/nature4.jpg",
"images/nature5.jpg",
"images/nature6.jpg",
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CarouselSlider.builder(
itemCount: listPaths.length,
options: CarouselOptions(
autoPlay: true,
onPageChanged: (index, reason) {
setState(() {
currentPos = index;
});
}
),
itemBuilder: (context,index){
return MyImageView(listPaths[index]);
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: listPaths.map((url) {
int index = listPaths.indexOf(url);
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: currentPos == index
? Color.fromRGBO(0, 0, 0, 0.9)
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}).toList(),
),
]
)
),
);
}
}
class MyImageView extends StatelessWidget{
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath),
)
);
}
}
Manual Slider
For manual sliding, We will show two buttons previous and next to change slider pageview. As earlier I explained CarouselController is used to manually change position of slider pageview.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class ManualSlide extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ManualSlideState();
}
}
class ManualSlideState extends State<ManualSlide> {
@override
Widget build(BuildContext context) {
CarouselController carouselController = new CarouselController();
return Scaffold(
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
CarouselSlider(
items: [
MyImageView("images/nature1.jpg"),
MyImageView("images/nature2.jpg"),
MyImageView("images/nature3.jpg"),
MyImageView("images/nature4.jpg"),
MyImageView("images/nature5.jpg"),
MyImageView("images/nature6.jpg"),
],
options: CarouselOptions(height:200),
carouselController: carouselController,
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
textColor: Colors.white,
color: Colors.pink,
child: Text("Previous"),
onPressed: () {
carouselController.previousPage();
},
),
SizedBox(
width: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.pink,
child: Text("Next"),
onPressed: () {
carouselController.nextPage();
},
)
],
),
])),
);
}
}
class MyImageView extends StatelessWidget {
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath),
));
}
}
Vertical Slider
CarouselOptions has scrollDirection parameter which is used to change orientation of slider page. For vertical direction, We need to pass vertical value to scrollDirection parameter.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class Vertical extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: CarouselSlider(
options: CarouselOptions(height:250,autoPlay: true,enlargeCenterPage: true,scrollDirection: Axis.vertical),
items: [
MyImageView("images/nature1.jpg"),
MyImageView("images/nature2.jpg"),
MyImageView("images/nature3.jpg"),
MyImageView("images/nature4.jpg"),
MyImageView("images/nature5.jpg"),
MyImageView("images/nature6.jpg"),
]
),
)
);
}
}
class MyImageView extends StatelessWidget{
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath,),
)
);
}
}
Carousel Slider With Network Images
In this we fetch images from internet and display in slider view. First we download image using NetworkImage widget in initState method and then store into cache to solve memory issue.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class FetchFromNetwork extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return FetchFromNetworkState();
}
}
class FetchFromNetworkState extends State<FetchFromNetwork> {
List<String> imgUrls = [
"https://wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-38.jpg",
"https://www.pixelstalk.net/wp-content/uploads/2016/07/Desktop-autumn-hd-wallpaper-3D.jpg",
"https://wallpaperplay.com/walls/full/1/a/1/286161.jpg",
"https://wallpapertag.com/wallpaper/full/c/8/8/548481-best-cool-nature-wallpapers-hd-1920x1080-720p.jpg",
"https://i.pinimg.com/originals/ff/e4/59/ffe459582c8e4dc676d73e4b07dcabc0.jpg",
"https://wallpapercave.com/wp/uUqxVHp.jpg",
];
@override
void initState() {
// TODO: implement initState
WidgetsBinding.instance.addPostFrameCallback((_) {
imgUrls.forEach((url) {
precacheImage(NetworkImage(url), context);
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: CarouselSlider.builder(
itemCount: imgUrls.length,
options: CarouselOptions(aspectRatio: 2.0, autoPlay: true),
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child:
Image.network(imgUrls[index], fit: BoxFit.cover, width: 1000),
);
},
),
));
}
}
class MyImageView extends StatelessWidget {
String imgUrl;
MyImageView(this.imgUrl);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: Image.network(
imgUrl,
fit: BoxFit.fill,
),
);
}
}
Carousel Slider With No Infinite Scroll
In Carousel widget, default slider pages are scrolled infinite times. To disable infinite scroll, we need to pass false value to enableInfiniteScroll parameter in carousel options widget.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class NoInfiniteScroll extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: CarouselSlider(
options: CarouselOptions(height:250,autoPlay: true,enableInfiniteScroll: false),
items: [
MyImageView("images/nature1.jpg"),
MyImageView("images/nature2.jpg"),
MyImageView("images/nature3.jpg"),
MyImageView("images/nature4.jpg"),
MyImageView("images/nature5.jpg"),
MyImageView("images/nature6.jpg"),
]
),
)
);
}
}
class MyImageView extends StatelessWidget{
String imgPath;
MyImageView(this.imgPath);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
child: FittedBox(
fit: BoxFit.fill,
child: Image.asset(imgPath,),
)
);
}
}
Final Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttercarouselslidersample/basic.dart';
import 'package:fluttercarouselslidersample/center_page_large.dart';
import 'package:fluttercarouselslidersample/custom_indicator.dart';
import 'package:fluttercarouselslidersample/fetch_from_network.dart';
import 'package:fluttercarouselslidersample/fullscreen.dart';
import 'package:fluttercarouselslidersample/manual_slide.dart';
import 'package:fluttercarouselslidersample/no_infinite_scroll.dart';
import 'package:fluttercarouselslidersample/vertical.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.red,
child: Text("Basic", style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Basic()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.amberAccent,
child:
Text("Center Page Large", style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CenterPageLarge()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text("Full Screen", style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FullScreen()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.green,
child:
Text("Custom Indicator", style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CustomIndicator()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.pink,
child: Text("Manual Slide", style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ManualSlide()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.deepPurple,
child: Text("Vertical", style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Vertical()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.deepOrange,
child: Text("Fetch From Network",
style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FetchFromNetwork()),
);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.teal,
child: Text("No Infinite Scroll",
style: TextStyle(fontSize: 22)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NoInfiniteScroll()),
);
},
),
SizedBox(
height: 15,
),
],
),
),
),
),
);
}
}
