Exploring Flutter Carousel Slider

A carousel slider is slideshow component of images or texts etc. Flutter provides carousel slider package to use carousel widgets in applications. You can also checkout sample at HERE.

In this article, I will show you how you can use different custom carousel sliders in your flutter apps.

 

Add below line under dependencies section in your pubspec file

carousel_slider: ^2.1.0
 
 

Introduction Of Carousel Widget

There are three important parameters in carousel widget: items, carouselController, options. In items param, We need to pass an array of widgets which are displayed in slider. Using your own carousel controller, You can control slider page’s position manually. CarouselOptions widget is passed to options parameter. CarouselOptions widget is used to customize slider with use of different parameters like autoplay, height etc.
 
 
 
 


Basic Carousel Slider

In this, I simply give height of slide page and autoplay true in carousel options widget. Autoplay means everytime slide is automatically scrolled.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class Basic extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: Center(
          child: CarouselSlider(
              options: CarouselOptions(height:250,autoPlay: true),
              items: [
                MyImageView("images/nature1.jpg"),
                MyImageView("images/nature2.jpg"),
                MyImageView("images/nature3.jpg"),
                MyImageView("images/nature4.jpg"),
                MyImageView("images/nature5.jpg"),
                MyImageView("images/nature6.jpg"),
              ]
          ),
        )
    );
  }

}

class MyImageView extends StatelessWidget{

  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
       margin: EdgeInsets.symmetric(horizontal: 5),
       child: FittedBox(
         fit: BoxFit.fill,
         child: Image.asset(imgPath,),
       )
    );
  }

}
 
 
 
carousel slider
 
 
 
 

Center Page Large Slider

We can change size of center page by giving value true to enlargeCenterPage property of carousel widget.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class CenterPageLarge extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: Center(
          child: CarouselSlider(
              options: CarouselOptions(height:250,autoPlay: true,enlargeCenterPage: true),
              items: [
                MyImageView("images/nature1.jpg"),
                MyImageView("images/nature2.jpg"),
                MyImageView("images/nature3.jpg"),
                MyImageView("images/nature4.jpg"),
                MyImageView("images/nature5.jpg"),
                MyImageView("images/nature6.jpg"),
              ]
          ),
        )
    );
  }

}

class MyImageView extends StatelessWidget{

  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        child: FittedBox(
          fit: BoxFit.fill,
          child: Image.asset(imgPath,),
        )
    );
  }

}
 
 
 
 
 
 

Full Screen Slider

To achieve full screen in carousel widget, First you need to get device screen height. Then you need to pass it to height parameter of carousel options widget.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class FullScreen extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    var getScreenHeight = MediaQuery.of(context).size.height;

    // TODO: implement build
    return Scaffold(
        body: Center(
          child: CarouselSlider(
              options: CarouselOptions(height: getScreenHeight,autoPlay: true,viewportFraction: 1.0),
              items: [
                MyImageView("images/nature1.jpg"),
                MyImageView("images/nature2.jpg"),
                MyImageView("images/nature3.jpg"),
                MyImageView("images/nature4.jpg"),
                MyImageView("images/nature5.jpg"),
                MyImageView("images/nature6.jpg"),
              ]
          ),
        )
    );
  }

}

class MyImageView extends StatelessWidget{

  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        child: FittedBox(
          fit: BoxFit.fill,
          child: Image.asset(imgPath,),
        )
    );
  }

}
 
 
 
carousel slider
 
 
 

Carousel Slider With Custom Indicator

In Android, We used viewpager to display slides with indicator. In Flutter, We need to create indicator circle shape. We will display number of created views as number of slides. So Whenever page is changed, Particular view of selected and deselected page is changed. In this we use CarouselSlider.builder instead of CarouselSlider widget.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class CustomIndicator extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CustomIndicatorState();
  }
}

class CustomIndicatorState extends State<CustomIndicator> {

  int currentPos = 0;
  List<String> listPaths = [
    "images/nature1.jpg",
    "images/nature2.jpg",
    "images/nature3.jpg",
    "images/nature4.jpg",
    "images/nature5.jpg",
    "images/nature6.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CarouselSlider.builder(
              itemCount: listPaths.length,
              options: CarouselOptions(
                  autoPlay: true,
                  onPageChanged: (index, reason) {
                    setState(() {
                      currentPos = index;
                    });
                  }
              ),
              itemBuilder: (context,index){
                return MyImageView(listPaths[index]);
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: listPaths.map((url) {
                int index = listPaths.indexOf(url);
                return Container(
                  width: 8.0,
                  height: 8.0,
                  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: currentPos == index
                        ? Color.fromRGBO(0, 0, 0, 0.9)
                        : Color.fromRGBO(0, 0, 0, 0.4),
                  ),
                );
              }).toList(),
            ),
          ]
        )
      ),
    );
  }
}

class MyImageView extends StatelessWidget{

  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        child: FittedBox(
          fit: BoxFit.fill,
          child: Image.asset(imgPath),
        )
    );
  }

}
 
 
 
carousel slider




Manual Slider

For manual sliding, We will show two buttons previous and next to change slider pageview. As earlier I explained CarouselController is used to manually change position of slider pageview.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class ManualSlide extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ManualSlideState();
  }
}

class ManualSlideState extends State<ManualSlide> {

  @override
  Widget build(BuildContext context) {
    CarouselController carouselController = new CarouselController();

    return Scaffold(
      body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        CarouselSlider(
          items: [
            MyImageView("images/nature1.jpg"),
            MyImageView("images/nature2.jpg"),
            MyImageView("images/nature3.jpg"),
            MyImageView("images/nature4.jpg"),
            MyImageView("images/nature5.jpg"),
            MyImageView("images/nature6.jpg"),
          ],
          options: CarouselOptions(height:200),
          carouselController: carouselController,
        ),
        SizedBox(
          height: 30,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              textColor: Colors.white,
              color: Colors.pink,
              child: Text("Previous"),
              onPressed: () {
                carouselController.previousPage();
              },
            ),
            SizedBox(
              width: 15,
            ),
            RaisedButton(
              textColor: Colors.white,
              color: Colors.pink,
              child: Text("Next"),
              onPressed: () {
                carouselController.nextPage();
              },
            )
          ],
        ),
      ])),
    );
  }
}

class MyImageView extends StatelessWidget {
  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        child: FittedBox(
          fit: BoxFit.fill,
          child: Image.asset(imgPath),
        ));
  }
}
 
 
 

 

Vertical Slider

CarouselOptions has scrollDirection parameter which is used to change orientation of slider page. For vertical direction, We need to pass vertical value to scrollDirection parameter.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class Vertical extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: Center(
          child: CarouselSlider(
              options: CarouselOptions(height:250,autoPlay: true,enlargeCenterPage: true,scrollDirection: Axis.vertical),
              items: [
                MyImageView("images/nature1.jpg"),
                MyImageView("images/nature2.jpg"),
                MyImageView("images/nature3.jpg"),
                MyImageView("images/nature4.jpg"),
                MyImageView("images/nature5.jpg"),
                MyImageView("images/nature6.jpg"),
              ]
          ),
        )
    );
  }

}

class MyImageView extends StatelessWidget{

  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        child: FittedBox(
          fit: BoxFit.fill,
          child: Image.asset(imgPath,),
        )
    );
  }

}
 
 
 
 

Carousel Slider With Network Images

In this we fetch images from internet and display in slider view. First we download image using NetworkImage widget in initState method and then store into cache to solve memory issue. 
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class FetchFromNetwork extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return FetchFromNetworkState();
  }
}

class FetchFromNetworkState extends State<FetchFromNetwork> {
  List<String> imgUrls = [
    "https://wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-38.jpg",
    "https://www.pixelstalk.net/wp-content/uploads/2016/07/Desktop-autumn-hd-wallpaper-3D.jpg",
    "https://wallpaperplay.com/walls/full/1/a/1/286161.jpg",
    "https://wallpapertag.com/wallpaper/full/c/8/8/548481-best-cool-nature-wallpapers-hd-1920x1080-720p.jpg",
    "https://i.pinimg.com/originals/ff/e4/59/ffe459582c8e4dc676d73e4b07dcabc0.jpg",
    "https://wallpapercave.com/wp/uUqxVHp.jpg",
  ];

  @override
  void initState() {
    // TODO: implement initState
    WidgetsBinding.instance.addPostFrameCallback((_) {
      imgUrls.forEach((url) {
        precacheImage(NetworkImage(url), context);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: Center(
      child: CarouselSlider.builder(
        itemCount: imgUrls.length,
        options: CarouselOptions(aspectRatio: 2.0, autoPlay: true),
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 5),
            child:
                Image.network(imgUrls[index], fit: BoxFit.cover, width: 1000),
          );
        },
      ),
    ));
  }
}

class MyImageView extends StatelessWidget {
  String imgUrl;

  MyImageView(this.imgUrl);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      child: Image.network(
        imgUrl,
        fit: BoxFit.fill,
      ),
    );
  }
}
 
 
 
 



Carousel Slider With No Infinite Scroll

In Carousel widget, default slider pages are scrolled infinite times. To disable infinite scroll, we need to pass false value to enableInfiniteScroll parameter in carousel options widget.
 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class NoInfiniteScroll extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: Center(
          child: CarouselSlider(
              options: CarouselOptions(height:250,autoPlay: true,enableInfiniteScroll: false),
              items: [
                MyImageView("images/nature1.jpg"),
                MyImageView("images/nature2.jpg"),
                MyImageView("images/nature3.jpg"),
                MyImageView("images/nature4.jpg"),
                MyImageView("images/nature5.jpg"),
                MyImageView("images/nature6.jpg"),
              ]
          ),
        )
    );
  }

}

class MyImageView extends StatelessWidget{

  String imgPath;

  MyImageView(this.imgPath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        child: FittedBox(
          fit: BoxFit.fill,
          child: Image.asset(imgPath,),
        )
    );
  }

}





Final Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttercarouselslidersample/basic.dart';
import 'package:fluttercarouselslidersample/center_page_large.dart';
import 'package:fluttercarouselslidersample/custom_indicator.dart';
import 'package:fluttercarouselslidersample/fetch_from_network.dart';
import 'package:fluttercarouselslidersample/fullscreen.dart';
import 'package:fluttercarouselslidersample/manual_slide.dart';
import 'package:fluttercarouselslidersample/no_infinite_scroll.dart';
import 'package:fluttercarouselslidersample/vertical.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.red,
                  child: Text("Basic", style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Basic()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.amberAccent,
                  child:
                      Text("Center Page Large", style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => CenterPageLarge()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.blue,
                  child: Text("Full Screen", style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => FullScreen()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.green,
                  child:
                      Text("Custom Indicator", style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => CustomIndicator()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.pink,
                  child: Text("Manual Slide", style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => ManualSlide()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.deepPurple,
                  child: Text("Vertical", style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Vertical()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.deepOrange,
                  child: Text("Fetch From Network",
                      style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => FetchFromNetwork()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.teal,
                  child: Text("No Infinite Scroll",
                      style: TextStyle(fontSize: 22)),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => NoInfiniteScroll()),
                    );
                  },
                ),
                SizedBox(
                  height: 15,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Leave a Reply