Flutter - Carousel Slider - GeeksforGeeks

15 Feb, 2021
Carousel Slider is one of the most popular image slider used nowadays in most apps. These Carousel Sliders are mostly seen in various eCommerce sites such as Amazon, Flipkart, Myntra, and many more. Displaying the images in a slider gives an attractive User Experience. As these sliders are automated you can get to see various types of images and content in them. 
Items: In which we have to declare Asset Images or Network Images that are used in our app
Options: It consists of many properties such as:
height: Overall height of card to display the imageautoplay: Cards automatically slides at a timeautoplaycurve: Determines the animation curveaspectRatio: Aspect Ratio is used to declare the heightautoPlayAnimationDuration: Used to declare time for automated slide
height: Overall height of card to display the image
autoplay: Cards automatically slides at a time
autoplaycurve: Determines the animation curve
aspectRatio: Aspect Ratio is used to declare the height
autoPlayAnimationDuration: Used to declare time for automated slide
In this article, we will look into the implementation of Carousel Slider in a Flutter app. To Implement the Carousel Slider in Flutter you have to follow the following steps:
Step 1: First add Carousel Slider dependency in pubspec.yaml file in the lib folder
We have added the dependency for Carousel Slider in our pubspec.yaml file located in the lib folder in dependencies as shown below:
Dart
dependencies:      carousel_slider: ^2.3.1
Now click on pub.get to configure.
Step 2: Now navigate to main.dart() file and return Material App(). 
First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme of our App as Dark Theme. Then we have given our first screen of or slider app in the home: HomePage()
Dart
void main() {  runApp(MyApp());}  class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,              // Title of App      title: 'GFG slider',      theme: ThemeData(        primarySwatch: Colors.green,      ),      darkTheme: ThemeData.dark(),              //First Screen of Slider App      home: HomePage(),    );  }}
Step 3: Now Import Carousel Slider dependencies in HomePage.dart() file.
In HomePage.dart() first we have to import our package carousel-slider.dart. Then we have created appbar inside Scaffold(). In this appbar we have given the title of the App. After that. Inside the body, we have declared ListView() inside which we have declared CarouselSlider() in which we have given 5 items. Each item is placed inside a Container() which consists of properties such as margin which is given from all sides. After that, we have given boxdecoration which is used to decorate our Container(). We have given boderRadius as circular. Which makes our Container() rounded from all sides by giving a specific radius. Now we have given an image in which we have declared DecorationImage() which is used to display images in our Container() through URL. And have fit the image as BoxFit.cover. Which adjust image as container size. Now for the other 4 containers, we have followed the same steps. After that, we have declared CarouselOptions() in options
Dart
import 'package:carousel_slider/carousel_slider.dart';import 'package:flutter/material.dart';    class  HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("GFG Slider"),      ),      body: ListView(        children: [          CarouselSlider(              items: [                                  //1st Image of Slider                Container(                  margin: EdgeInsets.all(6.0),                  decoration: BoxDecoration(                    borderRadius: BorderRadius.circular(8.0),                    image: DecorationImage(                      image: NetworkImage("ADD IMAGE URL HERE"),                      fit: BoxFit.cover,                    ),                  ),                ),                                  //2nd Image of Slider                Container(                  margin: EdgeInsets.all(6.0),                  decoration: BoxDecoration(                    borderRadius: BorderRadius.circular(8.0),                    image: DecorationImage(                      image: NetworkImage("ADD IMAGE URL HERE"),                      fit: BoxFit.cover,                    ),                  ),                ),                                  //3rd Image of Slider                Container(                  margin: EdgeInsets.all(6.0),                  decoration: BoxDecoration(                    borderRadius: BorderRadius.circular(8.0),                    image: DecorationImage(                      image: NetworkImage("ADD IMAGE URL HERE"),                      fit: BoxFit.cover,                    ),                  ),                ),                                  //4th Image of Slider                Container(                  margin: EdgeInsets.all(6.0),                  decoration: BoxDecoration(                    borderRadius: BorderRadius.circular(8.0),                    image: DecorationImage(                      image: NetworkImage("ADD IMAGE URL HERE"),                      fit: BoxFit.cover,                    ),                  ),                ),                                  //5th Image of Slider                Container(                  margin: EdgeInsets.all(6.0),                  decoration: BoxDecoration(                    borderRadius: BorderRadius.circular(8.0),                    image: DecorationImage(                      image: NetworkImage("ADD IMAGE URL HERE"),                      fit: BoxFit.cover,                    ),                  ),                ),            ],                          //Slider Container properties              options: CarouselOptions(                height: 180.0,                enlargeCenterPage: true,                autoPlay: true,                aspectRatio: 16 / 9,                autoPlayCurve: Curves.fastOutSlowIn,                enableInfiniteScroll: true,                autoPlayAnimationDuration: Duration(milliseconds: 800),                viewportFraction: 0.8,              ),          ),        ],      ),      );  }}
Output:
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - BoxShadow Widget