How to make an image carousel in Flutter

Last updated on November 20, 2020 A Goodman Loading... Post a comment

Many Flutter applications have carousels to display some featured images on home screens or detail screens. In general, a carousel allows you to infinitely loop through its items by swiping the screen. When you reach the last item, the carousel will back to the first one.

This article shows you how to make a simple image carousel in Flutter using a popular plugin named carousel_slider.

Installation

1. Add carousel_slider and its version to the dependencies section in your pubspec.yaml file, like this:

dependencies: 
  flutter:
    sdk: flutter
  carousel_slider: ^2.3.1

Note that the version may change over time.

2. Open a terminal, go to the project root directory, and run the following:

flutter pub get

3. Import the plugin into your Dart code:

import 'package:carousel_slider/carousel_slider.dart';

Sample usage:

CarouselSlider(
  options: CarouselOptions(
     /*...*/
  ),
  carouselController: CarouselController(
     /*...*/
  ),
  items: // List,
)

Full Example

The following example contains a carousel that automatically starts looping. Each carousel item consists of an image overlaid by some text.

Preview:

The complete code:

// main.dart
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List data = [
    {
      "title": "Image 1",
      "url":
          "https://cdn.pixabay.com/photo/2020/11/08/09/41/deer-5723225_960_720.jpg"
    },
    {
      "title": "Image 2",
      "url":
          "https://cdn.pixabay.com/photo/2020/11/01/19/41/autumn-5704791_960_720.jpg"
    },
    {
      "title": "Image 3",
      "url":
          "https://cdn.pixabay.com/photo/2020/04/11/14/55/houses-5030731_960_720.jpg"
    },
    {
      "title": "Image 4",
      "url":
          "https://cdn.pixabay.com/photo/2020/11/16/16/05/hoverfly-5749361_960_720.jpg"
    },
    {
      "title": "Image 5",
      "url":
          "https://cdn.pixabay.com/photo/2020/04/19/12/26/thread-5063401_960_720.jpg"
    },
    {
      "title": "Image 6",
      "url":
          "https://cdn.pixabay.com/photo/2020/11/16/22/58/mountains-5750804_960_720.jpg"
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          CarouselSlider(
            options: CarouselOptions(
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 2),
              autoPlayAnimationDuration: Duration(milliseconds: 400),
              height: 300,
            ),
            items: data.map((item) {
              return GridTile(
                child: Image.network(item["url"], fit: BoxFit.cover),
                footer: Container(
                    padding: EdgeInsets.all(15),
                    color: Colors.black54,
                    child: Text(
                      item["title"],
                      style: TextStyle(color: Colors.white, fontSize: 20),
                      textAlign: TextAlign.right,
                    )),
              );
            }).toList(),
          ),
          SizedBox(height: 30),
          Text(
            'Other Content',
            style: TextStyle(
              fontSize: 24,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

Hope this helps!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles