How to create a Carousel in Flutter

<p>When it comes to providing better user experience to users on mobile apps, making effective use of space is a must. Carousels come into play here by allowing the developers to show multiple items in a single, coveted space. Thankfully, implementing carousels in flutter is pretty straightforward and all we need is the **carousel_slider **package. By the end of this tutorial, you will be able to create a similar carousel in flutter. ![](../../../Uploads/d3c95d76-38f5-4aa6-a4bd-aac42e2d9a2e.gifwidth="50%height="auto]( With no further ado, let's add the package dependency to our font-weight: bolder;](pubspec.yaml filecolor: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: rgb(86, 156, 214);](dependencies: color: rgb(86, 156, 214);](flutter: color: rgb(86, 156, 214);](sdk: color: rgb(206, 145, 120);](flutter color: rgb(86, 156, 214);](carousel_slider: color: rgb(206, 145, 120);](^1.3.0 Next, use the following code snippet in your font-weight: bolder;](main.dart file to get the above illustration. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: rgb(86, 156, 214);](import color: rgb(206, 145, 120);]('package:flutter/material.dart';color: rgb(86, 156, 214);](import color: rgb(206, 145, 120);]('package:carousel_slider/carousel_slider.dart'; color: rgb(86, 156, 214);](void color: rgb(220, 220, 170);](main() => color: rgb(220, 220, 170);](runApp(color: rgb(78, 201, 176);](MyApp()); color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](MyApp color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](StatelessWidget { color: rgb(86, 156, 214);](@override color: rgb(78, 201, 176);](Widget color: rgb(220, 220, 170);](build(color: rgb(78, 201, 176);](BuildContext context) { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](MaterialApp( debugShowCheckedModeBanner: color: rgb(86, 156, 214);](false, title: color: rgb(206, 145, 120);]('Carousel Demo', theme: color: rgb(78, 201, 176);](ThemeData( primarySwatch: color: rgb(78, 201, 176);](Colors.blue, ), home: color: rgb(78, 201, 176);](MyHomePage(title: color: rgb(206, 145, 120);]('Carousel Demo'), ); }} color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](MyHomePage color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](StatefulWidget { color: rgb(78, 201, 176);](MyHomePage({color: rgb(78, 201, 176);](Key key, color: rgb(86, 156, 214);](this.title}) : color: rgb(86, 156, 214);](super(key: key); color: rgb(86, 156, 214);](final color: rgb(78, 201, 176);](String title; color: rgb(86, 156, 214);](@override color: rgb(78, 201, 176);](_MyHomePageState color: rgb(220, 220, 170);](createState() => color: rgb(78, 201, 176);](_MyHomePageState();} color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](_MyHomePageState color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](State { color: rgb(78, 201, 176);](List imageLinks = [ color: rgb(206, 145, 120);]('https://homepages.cae.wisc.edu/~ece533/images/fruits.png', color: rgb(206, 145, 120);]('https://homepages.cae.wisc.edu/~ece533/images/cat.png', color: rgb(206, 145, 120);]('https://homepages.cae.wisc.edu/~ece533/images/peppers.png', color: rgb(206, 145, 120);]('https://homepages.cae.wisc.edu/~ece533/images/tulips.png' ]; color: rgb(86, 156, 214);](@override color: rgb(78, 201, 176);](Widget color: rgb(220, 220, 170);](build(color: rgb(78, 201, 176);](BuildContext context) { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](Scaffold( appBar: color: rgb(78, 201, 176);](AppBar( title: color: rgb(78, 201, 176);](Text(widget.title), ), body: color: rgb(78, 201, 176);](Center( child: color: rgb(78, 201, 176);](Column( mainAxisAlignment: color: rgb(78, 201, 176);](MainAxisAlignment.center, children: [ color: rgb(78, 201, 176);](CarouselSlider( height: color: rgb(181, 206, 168);](400.0, items: imageLinks.color: rgb(220, 220, 170);](map((imageLink) { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](Builder( builder: (color: rgb(78, 201, 176);](BuildContext context) { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](Container( width: color: rgb(78, 201, 176);](MediaQuery.color: rgb(220, 220, 170);](of(context).size.width, margin: color: rgb(78, 201, 176);](EdgeInsets.color: rgb(220, 220, 170);](symmetric(horizontal: color: rgb(181, 206, 168);](5.0), child: color: rgb(78, 201, 176);](Image.color: rgb(220, 220, 170);](network( imageLink, fit: color: rgb(78, 201, 176);](BoxFit.cover, )); }, ); }).color: rgb(220, 220, 170);](toList(), reverse: color: rgb(86, 156, 214);](false, color: rgb(106, 153, 85);](//is false by default (reverses the order of items) enableInfiniteScroll: color: rgb(86, 156, 214);](true, color: rgb(106, 153, 85);](//is true by default (it scrolls back to item 1 after the last item) autoPlay: color: rgb(86, 156, 214);](true, color: rgb(106, 153, 85);](//is false by default initialPage: color: rgb(181, 206, 168);](0, color: rgb(106, 153, 85);](//allows you to set the first item to be displayed scrollDirection: color: rgb(78, 201, 176);](Axis.horizontal, color: rgb(106, 153, 85);](//can be set to Axis.vertical pauseAutoPlayOnTouch: color: rgb(78, 201, 176);](Duration( seconds: color: rgb(181, 206, 168);](5), color: rgb(106, 153, 85);](//it pauses the sliding if carousel is touched, onPageChanged: (color: rgb(86, 156, 214);](int pageNumber) { color: rgb(106, 153, 85);](//this triggers everytime a slide changes }, viewportFraction: color: rgb(181, 206, 168);](0.8, enlargeCenterPage: color: rgb(86, 156, 214);](true, color: rgb(106, 153, 85);](//is false by default aspectRatio: color: rgb(181, 206, 168);](16 / color: rgb(181, 206, 168);](9, color: rgb(106, 153, 85);](//if height is not specified, then this value is used ) ] ) ) ); }}</p> <p>font-weight: bolder;](Brief Overview:font-weight: bolder;](CarouselSlider widget takes has *items *property which takes a list of items to be displayed in the carousel. For efficient loading and memory saving, you can use a font-weight: bolder;](Map & Builder widget as shown in the above example to <em>return</em> *a custom widget *for every list item.</p>