Flutter - Carousel Slider

Carousel Slider is one of the most popular image sliders used nowadays in most apps. These carousel sliders are mostly seen on 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:

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:

carousel_slider: ^5.0.0

Now run the below command in terminal to update the pubspec.yaml.

flutter pub get

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().

main.dart:

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.

HomePage.dart

Don't forget to replace the image URL's in the place of "ADD IMAGE URL HERE".

Output: