Open In App

Flutter – Carousel Slider

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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. 

Properties of Carousel Slider:

  • 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:
  1. height: Overall height of card to display the image
  2. autoplay: Cards automatically slides at a time
  3. autoplaycurve: Determines the animation curve
  4. aspectRatio: Aspect Ratio is used to declare the height
  5. 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:



Last Updated : 15 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads