Carousel Image Slider In Flutter With Examples

Flutter / By Rakesh Saini / August 24, 2021

In this tutorial we will learn how to create an image slider in flutter by loading an image from the URL. To show the images in the slider we will use the carousel slider API from flutter dev website.

What is a Carousel Image Slider In Flutter?

Sometimes we want to show images in moving form, it can be from left to right or up to down. You can see these types of dynamic image sliders in amazon, flipkart or many other shopping or entertainment websites or apps.

Add The Following Dependency

Add the following dependency in your pubspec.yaml file and click on pub get.

dev_dependencies:
  flutter_test:
    sdk: flutter
  carousel_slider: ^4.0.0

Create A List Of Images

I am directly using the URL of images. You can get your images from a server like API. There is no big difference between them. We only needed the URL. Following is the list of URLs of images you can use by copy and paste in your code.

final List<String> imageList = ["https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80",
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'];

Import The Flutter Carousel Image Slider Library In Flutter Class

Import the carousel library in your class where you are using the Carousel Image slider.

import 'package:carousel_slider/carousel_slider.dart';

Widget For Image Slider

Use Following widget in your flutter project class to create a dynamic image slider. You can manage it by wrapping Column, Row, Container or other widget for any type style. Please note that I wrapped it inside Container for better look and margin.

Container(
  margin: EdgeInsets.all(15),
  child: CarouselSlider.builder(
    itemCount: imageList.length,
    options: CarouselOptions(
      enlargeCenterPage: true,
      height: 300,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      reverse: false,
      aspectRatio: 5.0,
    ),
    itemBuilder: (context, i, id){
      //for onTap to redirect to another screen
      return GestureDetector(
        child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
            border: Border.all(color: Colors.white,)
        ),
          //ClipRRect for image border radius
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15),
            child: Image.network(
              imageList[i],
            width: 500,
            fit: BoxFit.cover,
            ),
          ),
        ),
        onTap: (){
          var url = imageList[i];
          print(url.toString());
        },
      );
    },
  ),
),

I used the GestureDetector() widget for moving into another screen by clicking on a particular image.

You can learn more about this image slider from pub.dev website. There are many other sliders available for your desire. You can go by clicking here.

Please do comment if you like this tutorial even if you find any issue in this code.

Please also learn more flutter and android tutorials which will improve your development skills.

Buy us a Coffee to provide best content for you.