Carousel Slider - Flutter

 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. aspect ratio: Aspect Ratio is used to declare the height
5. autoPlayAnimationDuration: Used to declare time for automated slide

We have added the dependency for Carousel Slider in our pubspec.yaml file located in the lib folder in dependencies as shown below:

dependencies:

  

    carousel_slider: ^2.3.1




Now Import Carousel Slider dependencies in HomePage.dart() file.

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,

),

),

],

),

);

}

}