Overview
Popular UI element carousel slider Flutter lets you show a set of objects in a scrolling vertical or horizontal fashion with only one item displayed at a time. The carousel’s items can be moved between them by tapping or swiping. One of the main features of a carousel in Flutter is its ability to display a single item at a time while providing navigation controls, like swipe movements or tap events, that let users flip between objects.
Introduction
A carousel slider flutter is a user interface (UI) component that lets you create eye-catching and dynamic presentations of items, such as cards or photos, that scroll vertically or horizontally. It provides users with an interactive way to browse through a collection of objects, often displaying one item at a time, with navigation capabilities like swipe gestures or tap events. Flutter is a popular cross-platform framework for building mobile apps that includes a number of carousel slider libraries that make it easy to add and change carousels to your project. Whether you’re creating a portfolio, news feed, photo gallery, or product display, a carousel in Flutter may be a powerful tool for enhancing the visual appeal and interactivity of your app.
Properties of Carousel Slider
Depending on the particular library or implementation used, the characteristics of a carousel slider in Flutter may differ, but some typical characteristics might include:
Items
In a flutter carousel slider The different content components that can be seen and navigated through are called items. Items might be images, widgets, or any other type of content you wish to display visually appealing. You may also change the appearance and functionality of each item in the carousel by using the item builder callback method, which lets you dynamically design each item according to your specific requirements. This gives you the ability to change each carousel item’s description, appearance, and style at will.
Options
Height
To adjust the height of the carousel to different screen sizes, you can choose a fixed height or utilize a percentage or fraction of the available area.
Auto-play
The automated scrolling of the carousel’s items can be turned on or off with this option.
Auto-play curve
Tocustomizee the acceleration and deceleration of the auto-play animation, you can select from a variety of predefined curves including linear, ease-in, ease-out, or custom curves.
AutoPlayAnimationDuration
The autoPlayAnimationDuration property determines the duration of the animation when the carousel automatically transitions between items. When the autoPlay feature is enabled, the carousel automatically moves to the next item after a certain period.
AspectRatio
The aspect ratio of each item in the carousel can becustomizedd using this option. This helps to maintain uniform item sizes throughout the carousel in the carousel Slider flutter.
Using Carousel Slider in Flutter
Add the carousel_slider package to your pubspec.yaml file and run Flutter pub get to install it in your Flutter project.
dependencies:
carousel_slider: ^4.2.1Import the carousel_slider package in your Flutter Dart file:
import 'package:carousel_slider/carousel_slider.dart';Make a list of the objects you wish to see in the carousel and show it. These things could be photos, widgets, or any other kind of widget for the carousel SliderFlutterr.
List<Widget> carouselItems = [
Image.asset('assets/image1.png'),
Image.asset('assets/image2.png'),
Image.asset('assets/image3.png'),
];
Use the CarouselSlider widget to create the carousel and pass the list of items as children:
CarouselSlider(
items: carouselItems,
options: CarouselOptions(
// Set the desired options for the carousel
height: 200, // Set the height of the carousel
autoPlay: true, // Enable auto-play
autoPlayCurve: Curves.easeInOut, // Set the auto-play curve
autoPlayAnimationDuration: Duration(milliseconds: 500), // Set the auto-play animation duration
aspectRatio: 16/9, // Set the aspect ratio of each item
// You can also customize other options such as enlargeCenterPage, enableInfiniteScroll, etc.
),
)
To customize the carousel, set the desired parameters in the CarouselOptions object. You have control over each item’s height, aspect ratio, auto-play curve, enable/disable functionality, and more. See the carousel_slider package documentation for an exhaustive list of possible parameters and instructions on how to use them.
Example Application
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scaler Slider',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() =>HomePageSTate();
}
class HomePageSTate extends State<HomePage> {
List<String> images = [
'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.bircyBDvJOcKd3mkR6ramwHaEK%26pid%3DApi&f=1&ipt=5909f3cdfdc42fb7effd2baabc4312074c2866f899860a96cf501dc9d1f51cf4&ipo=images"',
'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OjNHJL6A-Lzw_jLJfFgtMwHaEK%26pid%3DApi&f=1&ipt=9f19fe8349e515790867030de18da3ba6f4cae0548d5195b66004453fb7916d0&ipo=images',
'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.hdwallpaper.nu%2Fwp-content%2Fuploads%2F2015%2F09%2Ftropical_beach_blue_summer_sea_emerald_sand_hd-wallpaper-1701606.jpg&f=1&nofb=1&ipt=6eb95fc58404f4ef582fa656596438a8313acf27a78c036f2657e601cba7be53&ipo=images'
'http://allpicts.in/wp-content/uploads/2018/03/Natural-Images-HD-1080p-Download-with-Keyhole-Arch-at-Pfeiffer-Beach.jpg',
'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.rvSWtRd_oPRTwDoTCmkP5gAAAA%26pid%3DApi&f=1&ipt=4eff9a5d7d22249208e9472e985283aee53c7c785e9265810c51f0f39de585bc&ipo=images'
];
int currentIndex=0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Scaler Slider"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CarouselSlider(
items: List.generate(
images.length,
(index) => Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage(
images[index]
),
fit: BoxFit.cover,
),
),
),
),
options: CarouselOptions(
height: 180.0,
enlargeCenterPage: true,
onPageChanged: (int page,_){
setState(() {
currentIndex=page;
});
},
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(images.length, (index) => Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
height: 15,width: 15,
decoration: BoxDecoration(
color: currentIndex==index?Colors.grey:Colors.grey[300],
shape: BoxShape.circle
),
),
)),
)
],
),
),
);
}
}
Every container offers the following image that should be smoothly transitioned after the preceding one. Image 2 follows Image 1 in sequence, and this pattern can be reversed as well.