Usage of CarouselSlider in Flutter

What is CarouselSlider?

CarouselSlideris a widget that you can scroll image etc.

How to use CarouselSlider?

First of all, we need to add carousel_slider: ^2.3.1 inpubspec.yaml dependencies.

Create a CarouselSlider widget :

CarouselSlider(
items: _colors.map((i){
return Builder(builder: (BuildContext context){
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 15),
decoration: BoxDecoration(color: i,
borderRadius: BorderRadius.circular(25)),
);
});
}).toList(),
)

Add an options :

options: CarouselOptions(
height: 400,
enableInfiniteScroll: true,
enlargeCenterPage: true,
autoPlay: false,
scrollDirection: Axis.horizontal,
),
enlargeCenterPage: false,
scrollDirection: Axis.vertical,
viewportFraction: 0.4,
enableInfiniteScroll: false,

The code of the visual in the first gif like below :

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: CarouselSlider(
items: _colors.map((i){
return Builder(builder: (BuildContext context){
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 15),
decoration: BoxDecoration(color: i,
borderRadius: BorderRadius.circular(25)),
);
});
}).toList(),
options: CarouselOptions(
height: 400,
enableInfiniteScroll: true,
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
),
),
),
),
);
}
final List _colors =[
Colors.yellow,
Colors.lightBlue,
Colors.red,
Colors.green,
];
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store