Flutter – Carousel Slider

July 12, 2024 by

365Bloggy

Carousel Slider is one of the most popular image sliders used in modern apps. These Carousel Sliders are commonly used on numerous eCommerce sites. Displaying photographs in a slider provides an appealing user experience. These sliders are automated, so you can see a variety of images and material.

In this article, you will learn how to create your Carousel slider in Flutter. So let’s take Carousel slider widget example of the FAB in Flutter of Mobile application.

Properties of carousel slider:

height : 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.

Add package in pubspec.yaml

 dev_dependencies:
   flutter_test:
     sdk: flutter
     cupertino_icons:

Creating an Carousel Slider:

CarouselSlider(

   items: [
 
    //1st Image of Slider
     Container(
       margin: EdgeInsets.all(6.0),
        decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(8.0),
         image: const DecorationImage(
           image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
           fit: BoxFit.cover,
        ),
      ),
    ),

    //2nd Image of Slider
    Container(
      margin: EdgeInsets.all(6.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        image: const DecorationImage(
          image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),

    //3rd Image of Slider
    Container(
      margin: EdgeInsets.all(6.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        image: const DecorationImage(
          image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),

    //4th Image of Slider
    Container(
      margin: EdgeInsets.all(6.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        image: const DecorationImage(
          image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),

    //5th Image of Slider
    Container(
      margin: EdgeInsets.all(6.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        image: const DecorationImage(
          image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
          fit: BoxFit.cover,
        ),
      ),
    ),

  ],

   //Slider Container properties
   options: CarouselOptions(
     height: 180.0,
     enlargeCenterPage: true,
     autoPlay: true,
     aspectRatio: 16 / 9,
     autoPlayCurve: Curves.fastOutSlowIn,
     enableInfiniteScroll: true,
     autoPlayAnimationDuration: const Duration(milliseconds: 800),
     viewportFraction: 0.8,
   ),
 )

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 4: Final code of Carousel Slider .

 import 'package:flutter/material.dart';

 import 'package:carousel_slider/carousel_slider.dart';

 void main() {
   //runApp(MyApp());
   MaterialApp(home: MyApp());
 }

 class  MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Slider Demo"),
      ),
       body: ListView(
         children: [
           CarouselSlider(
            items: [

              //1st Image of Slider
              Container(
                margin: EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: const DecorationImage(
                    image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),

              //2nd Image of Slider
              Container(
                margin: EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: const DecorationImage(
                    image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),

              //3rd Image of Slider
              Container(
                margin: EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: const DecorationImage(
                    image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),

              //4th Image of Slider
              Container(
                margin: EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: const DecorationImage(
                    image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),

              //5th Image of Slider
              Container(
                margin: EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  image: const DecorationImage(
                    image: NetworkImage("https://cdn.candidroot.com/website_candidroot/static/src/img/company_logo.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),

            ],

            //Slider Container properties
            options: CarouselOptions(
              height: 180.0,
              enlargeCenterPage: true,
              autoPlay: true,
              aspectRatio: 16 / 9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: const Duration(milliseconds: 800),
              viewportFraction: 0.8,
             ),
           ),
         ],
       ),
 
     );
   }
 }

Flutter – Carousel Slider

Properties of carousel slider:

Add package in pubspec.yaml

Creating an Carousel Slider:

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

Step 3: Creating a stateless widget

Share this post

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us