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

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()
Aspect Ratio
options: CarouselOptions(aspectRatio: 1.2)

Height
height:300

Auto Play
autoPlay: true
Auto Play Animation Duration
autoPlayAnimationDuration: Duration(seconds: 4)
Auto Play Curve
autoPlayCurve: Curves.bounceIn
Enlarge Center Page
enlargeCenterPage: true

Enlarge Strategy
enlargeStrategy: CenterPageEnlargeStrategy.height
Initial Page
initialPage: 2
Enable Infinite Scroll
enableInfiniteScroll: false

Page Snapping
pageSnapping: false
Reverse
reverse: true
View Port Fraction
viewportFraction: 1

Scroll Direction
scrollDirection: Axis.vertical

Scroll Physics
scrollPhysics: NeverScrollableScrollPhysics()
Auto Play Interval
autoPlayInterval: Duration(seconds: 2)
On Page Changed
onPageChanged: (index, reason) { print(index.toString()); print(reason.toString()); }
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 have 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.