Let’s talk about flutter carousel slider customization but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter carousel sliders, what they really are, their role, and usage in flutter apps and finally the mentioned flutter carousel slider example.
Introduction
Carousel slider, as the name suggests, it slides its items. It gives a very beautiful look to your app and a good user experience. Flutter carousel slider has many properties for making the slider very attractive and eye catching. Most of the popular websites and apps have carousel sliders in them. Let’s see how to implement the mentioned beautiful carousel slide in our flutter app.
Import Carousel Slider Package
carousel_slider: ^4.0.0
Write this line in the dependencies section of your pubspec.yaml and run pub get to import the package in your app.
To get the latest version, you can visit here.
Implementation
Let’s now implement our carousel slider in our app:
Carouse Slider Builder
CarouselSlider.builder(
itemCount: 10,
options: CarouselOptions(aspectRatio: 1.2)
itemBuilder: (context, index, realIndex)
{
return Container(
margin: EdgeInsets.symmetric(horizontal: 10),
color: Colors.blue.shade500,
);
}
)
We have used the carousel slider class builder, inside it we have:
- An item count constructor, which defines the number of items in our carousel slider.
- Options constructor, in which we can specify how the carousel slider will work, like the auto slider, how much space will each item cover of screen etc.
- Item builder constructor will return the widget specified e.g. a container having some text, it will return that specific widget and how many will return are specified using the item count constructor. For just a simple example, we have returned a container widget, having a blue color and some horizontal margin as well, so each container will be separated. Let’s see how it looks now:
Carousel Options
options:CarouselOptions()
Using the options constructor, lets customize our carousel slider. For that, we use a carousel option class,
Aspect Ratio
options: CarouselOptions(aspectRatio: 1.2)
Aspect ratio constructor is used if no height is specified, the more value it has, the less the height of the carouse will be. As you can see in the above image. We have specified aspect ratio for this.
Height
height:300
We have used the height constructor, when we specify height then then aspect ratio won’t be used.
Auto Play
autoPlay: true
Specifying the auto play constructor to true will automatically set the slider to true, which means the slider will automatically slide its items after some time i.e. 1 or 2 seconds. By default, auto play is false.
Auto Play Animation Duration
autoPlayAnimationDuration: Duration(seconds: 4)
Using the auto play animation duration constructor, we can specify the duration of the animation when an item slides in the slider when the auto play constructor is set to true. We have set it to 4 just for demonstration that giving it greater value means slower the slider animation will be.
Auto Play Curve
autoPlayCurve: Curves.bounceIn
Using the auto play curve constructor, we can specify the animation curve when an item slides in our carousel slider. For demonstration purpose, we have set it to bounce in, the item will have a bouncing animation whenever it slides in the slider. You can use other curves as well. It has a variety of curves, like ease in, decelerate etc.
Enlarge Center Page
enlargeCenterPage: true
Specifying the enlarge center page constructor to true means that the item in the carousel slider which whenever the slider slides and the item that we see in our screen in the center will be enlarged. See the above image example.
Enlarge Strategy
enlargeStrategy: CenterPageEnlargeStrategy.height
Enlarge strategy constructor is used to specify which strategy to use to enlarge the center page, we have specified the height, so whenever the center page enlarges, then do it by enlarging the height.
Initial Page
initialPage: 2
Initial page constructor defines which item to show when the user navigates to the carouse slider page. We have specified it to 2 so it will start from third item of the carousel slider because the index starts from 0, so 0,1,2 we get the third item.
Enable Infinite Scroll
enableInfiniteScroll: false
Using the enable infinite scroll constructor, we can specify our slider to scroll for forever, by default, its true but making it false means it will slide till the last item and wont slide forward after that. Same is for the first item, it wont slide in backward direction if it is already in the first item. Although, it can slide forward and backward between other items other than the first and the last one. In the above image, we are in the last item and its not scrolling forward because the enable infinite scroll is set to false.
Page Snapping
pageSnapping: false
Using the page snapping constructor, we can specify that if we slide the item, then should it slide entirely to the other item or to only some extent. It is very good for custom sliding behavior. By default, its set to true but if we set it to false then we can control like every pixel of the page snapping.
Reverse
reverse: true
Using the reverse constructor and setting it to true will auto slide the items in the backward direction, from right to left.
View Port Fraction
viewportFraction: 1
Using the view port fraction constructor, we can specify specify the width of each item. Making it 1 will specify to show only one item at a time in the slider, decrease its value from 1 will make the width less that the screen width which allows other items to be shown at the same time. See the image above in which we have specified the view port fraction to 1. You can see the width it little less than the screen width and that’s because we have given our container some margin. Let’s give our view port fraction 0.7 value and see how it looks now:
image here
Scroll Direction
scrollDirection: Axis.vertical
Using the scroll direction constructor, we can specify the direction of our carousel slide, by default, it is horizontal but if we make it vertical, then you can see it moves in vertical direction as you can see in the image above. Make its height larger if you want.
Scroll Physics
scrollPhysics: NeverScrollableScrollPhysics()
Using the scroll physics constructor, we can specify how the animation will animate if the user stops dragging the items. If you don’t want to slide the items or want to just freeze them in their positions then use the never scrollable scroll physics class.
Auto Play Interval
autoPlayInterval: Duration(seconds: 2)
Using the auto play interval constructor, if we specify the duration to 2 seconds then it will animate or slide the next item in 2 seconds, by default, it is 4 seconds.
On Page Changed
onPageChanged: (index, reason) {
print(index.toString());
print(reason.toString());
}Using the on page changed constructor, we can specify some functionality when the page slides, using the index argument, we can specify in which item we are currently sliding from or to. Reason argument specifies whether the slide occurs manually or automatic. When the slide occurs from the user, means when the user drags the item then it shows manual and when it occurs from the auto play then it shows timed.
Source Code
Let’s see the complete source code for the mentioned flutter beautiful carousel slider design implementation.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter beautiful carousel slider',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Carousel Slider',
style: TextStyle(
fontSize: 30,
color: Colors.blue.shade600,
fontWeight: FontWeight.w900,
shadows: [
Shadow(
color: Colors.black38,
blurRadius: 5,
offset: Offset(2, 2))
]),
),
SizedBox(
height: 30,
),
CarouselSlider.builder(
itemCount: 10,
itemBuilder: (context, index, realIndex) {
return Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 2),
blurRadius: 7,
spreadRadius: 2)
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(index.isEven
? 'assets/development.jpg'
: 'assets/cartoon.jpg'))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 2),
blurRadius: 7,
spreadRadius: 2)
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(index.isEven
? 'assets/development.jpg'
: 'assets/cartoon.jpg'))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 2),
blurRadius: 7,
spreadRadius: 2)
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(index.isEven
? 'assets/development.jpg'
: 'assets/cartoon.jpg'))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 2),
blurRadius: 7,
spreadRadius: 2)
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(index.isEven
? 'assets/development.jpg'
: 'assets/cartoon.jpg'))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2, 2),
blurRadius: 7,
spreadRadius: 2)
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(index.isEven
? 'assets/development.jpg'
: 'assets/cartoon.jpg'))),
),
),
),
),
);
},
options: CarouselOptions(
onPageChanged: (index, reason) {
print(index.toString());
print(reason.toString());
},
height: 300,
autoPlay: true,
autoPlayAnimationDuration: Duration(seconds: 2),
autoPlayCurve: Curves.easeInOutBack,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
initialPage: 2,
pageSnapping: false,
viewportFraction: .7,
autoPlayInterval: Duration(seconds: 4))),
SizedBox(
height: 10,
),
Text(
'Hope you enjoyed it,Keep learning and happy coding',
style: TextStyle(
fontSize: 15,
color: Colors.blue.shade600,
fontWeight: FontWeight.w900,
shadows: [
Shadow(
color: Colors.black26,
blurRadius: 5,
offset: Offset(2, 2))
]),
),
],
),
),
),
);
}
}Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.
Hmm іt appears like your weƄsite ate my fіrst comment (it
was supeг long) so I ցuess I’ll just sum it up what I had ԝritten and say, Ι’m thoroughly enjoying your blog.
I too am an aspiring Ƅlog writer but I’m still new t᧐ the whole thing.
Do you haｖe any tips and hints for rookie
blog writers? I’d genuinely apprеciatе it.
Just try to write more quality content and share your knowledge as much as you can. Consistency is the key. Thanks.