How to create Carousel in Flutter

In one of my project, it is required to implement a carousel with Image and few text of different styles. I had started searching for some code and every time ends with a carousel code with single image, than i had developed a carousel with custom views for my project. I will explain step by step how i had developed it. You can easily customise it for any other type of view.

Add Dependency

In your flutter project add dependency in pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  carousel_widget:

Add Images to Assets

assets:
  - assets/
  - images/place1.JPG
  - images/place2.JPG
  - images/place3.JPG

Import Packages

import carousel_widget into dart file

import 'package:flutter/material.dart';
import 'package:carousel_widget/carousel_widget.dart';

Prepare Screens for carousel

Let us now create screen for carousel, you can create any custom design as per your requirement. Here we will create screen with one image on top, than a title and blow that description.

for that create list and populate data to them

List<String> titles = List();
List<String> description = List();
List<String> imagenames = List();

void initializeData() {
  titles.add("Title of First Screen");
  description.add("Description of First Screen");
  imagenames.add("images/place1.jpg");

  titles.add("Title of Second Screen");
  description.add(
      "Description of Second Screen");
  imagenames.add("images/place2.jpg");

  titles.add("Title of Third Screen");
  description.add(
      "Description of Third Screen");
  imagenames.add("images/place3.jpg");
}

for creating screen i had created a function getScreen(index) where image, title and description are taken from List depending upon index. If in your case you want entirely different screens in carousel than write separate function to design separate screen with different components and layout.

Widget getScreen(index) {
  return new ListView(
    children: <Widget>[
      new Container(
        height: 250.0,
        margin: const EdgeInsets.fromLTRB(20.0, 90.0, 20.0, 0.0),
        child: Image.asset(
          imagenames.elementAt(index),
        ),
      ),
      new Container(
        height: 45.0,
        margin: const EdgeInsets.fromLTRB(20.0, 8.0, 20.0, 0.0),
        child: Text(
          titles.elementAt(index),
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontSize: 20),
        ),
      ),
      new Container(
        height: 100.0,
        margin: const EdgeInsets.fromLTRB(50.0, 12.0, 50.0, 0.0),
        child: Text(
          description.elementAt(index),
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          maxLines: 5,
          style: TextStyle(fontSize: 15),
        ),
      ),
    ],
  );
}

Now according to index passed to getScreen we get a widget corresponding to a screen in carousel.

Creating carousel

Now we are having the screens designed we can create carousel.

@override
Widget build(BuildContext context) {

  initializeData();

  return Scaffold(
    backgroundColor: Colors.white,
    body:
        Carousel(
          listViews: [
            Fragment(
              child: getScreen(0),
            ),
            Fragment(
              child: getScreen(1),
            ),
            Fragment(
              child: getScreen(2),
            )
          ],
        )
  );
}

Complete Code

import 'package:flutter/material.dart';
import 'package:carousel_widget/carousel_widget.dart';

class Intro extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyCarousel(),
    );
  }
}

class MyCarousel extends StatelessWidget {


  @override
  Widget build(BuildContext context) {

    initializeData();

    return Scaffold(
      backgroundColor: Colors.white,
      body:
          Carousel(
            listViews: [
              Fragment(
                child: getScreen(0),
              ),
              Fragment(
                child: getScreen(1),
              ),
              Fragment(
                child: getScreen(2),
              )
            ],
          )
    );
  }

  Widget getScreen(index) {
    return new ListView(
      children: <Widget>[
        new Container(
          height: 250.0,
          margin: const EdgeInsets.fromLTRB(20.0, 90.0, 20.0, 0.0),
          child: Image.asset(
            imagenames.elementAt(index),
          ),
        ),
        new Container(
          height: 45.0,
          margin: const EdgeInsets.fromLTRB(20.0, 8.0, 20.0, 0.0),
          child: Text(
            titles.elementAt(index),
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontSize: 20),
          ),
        ),
        new Container(
          height: 100.0,
          margin: const EdgeInsets.fromLTRB(50.0, 12.0, 50.0, 0.0),
          child: Text(
            description.elementAt(index),
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            maxLines: 5,
            style: TextStyle(fontSize: 15),
          ),
        ),
      ],
    );
  }

  List<String> titles = List();
  List<String> description = List();
  List<String> imagenames = List();

  void initializeData() {
    titles.add("Title of First Screen");
    description.add("Description of First Screen");
    imagenames.add("images/place1.jpg");

    titles.add("Title of Second Screen");
    description.add(
        "Description of Second Screen");
    imagenames.add("images/place2.jpg");

    titles.add("Title of Third Screen");
    description.add(
        "Description of Third Screen");
    imagenames.add("images/place3.jpg");
  }
}