In this Flutter post, we will be learning what Flutter carousel slider autoplay is and how to customize it. An easy Flutter example with step by step explanation will be provided for better understanding of the role and usage of Flutter carousel slider autoplay. Let’s both of us jump right into its implementation.
What is Flutter Carousel Slider Autoplay?
As you know that Flutter carousel slider is used to slide a list of items. Its a very good approach to make the app look more professional. But what is the role of autoplay in Flutter carousel slider? As the name suggests, it is used to set whether the carousel slider should slide items automatically or not.
Let’s now understand it with the help of a proper Flutter example.
Default Flutter Carousel Slider Autoplay Status
In order to see what is the default state of Flutter carousel slider autoplay, we have to implement a simple Flutter carousel slider widget. Click here if you want to know how to import the carousel slider package.
As a list of items, we have passed a Flutter container widget with a background image. For more decoration, we have make the edges of container a bit circular and also have given shadow to it. You will also see a child text widget of that container. Now we will see whether the slider auto slides the items or not. Below code has a practical implementation of this theory.
SizedBox(
height: 200,
width: double.infinity,
child: CarouselSlider(
items: [
for (int i = 0; i < 4; i++)
Container(
alignment: Alignment.center,
margin:
EdgeInsets.symmetric(horizontal: 10, vertical: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black45, BlendMode.darken),
image: AssetImage('assets/cartoon.jpg')),
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 2,
blurRadius: 8,
offset: Offset(4, 4))
]),
child: Text(
'Flutter Carousel Slider item ${i + 1}',
style: TextStyle(color: Colors.white, fontSize: 15),
),
)
],
options: CarouselOptions(),
),
)Custom Flutter Carousel Slider Autoplay Status
As you can see, we have an options constructor in Flutter carousel slider widget class. We have to pass carousel options class to that constructor as seen in the above code. This carousel options class has an autoplay constructor which takes a Boolean(true/false) value. By default, it is false which means the slider will not slide automatically. Now in order to implement Flutter carousel slider autoplay, we have to pass true to that constructor. See the below code:
options: CarouselOptions( autoPlay: true )
Flutter Carousel Slider Autoplay Implementation Source Code
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(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 200,
width: double.infinity,
child: CarouselSlider(
items: [
for (int i = 0; i < 4; i++)
Container(
alignment: Alignment.center,
margin:
EdgeInsets.symmetric(horizontal: 10, vertical: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black45, BlendMode.darken),
image: AssetImage('assets/cartoon.jpg')),
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 2,
blurRadius: 8,
offset: Offset(4, 4))
]),
child: Text(
'Flutter Carousel Slider item ${i + 1}',
style: TextStyle(color: Colors.white, fontSize: 15),
),
)
],
options: CarouselOptions(autoPlay: true),
),
),
],
),
),
));
}
}Conclusion
In conclusion, hope you enjoyed it and have learnt how to implement Flutter carousel slider autoplay. Feel free to implement it in your own Flutter code and share your experience. I would be looking forward at your feedback. Thanks for reading.
