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