How to create an image slider in Flutter

Flutter provides creative freedom to developers to create visually attractive applications by providing a variety of UI features. Flutter is a single codebase framework that can be used across different platforms like Android and iOS. It has pub package manager that offers a range of packages and plugins.

What is an image slider?

An image sider refers to a carousel of images that shows a set of images one by one when slid towards right or left without changing the webpage. The images are placed in a series to form a gallery where one picture is visible at one moment in order to improve the user's focus on one image and its content. We can use dots or arrows to make navigation easier from one image to the other.

import 'package:flutter/material.dart';

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

class ImageSliderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageSliderScreen(),
    );
  }
}

class ImageSliderScreen extends StatefulWidget {
  @override
  _ImageSliderScreenState createState() => _ImageSliderScreenState();
}

class _ImageSliderScreenState extends State<ImageSliderScreen> {
  PageController _pageController = PageController();
  int _currentPage = 0;

  List<String> _images = [
    'https://images.pexels.com/photos/6889088/pexels-photo-6889088.jpeg?auto=compress&cs=tinysrgb&w=1600',
    'https://images.pexels.com/photos/10643964/pexels-photo-10643964.jpeg?auto=compress&cs=tinysrgb&w=600',
    'https://images.pexels.com/photos/7780128/pexels-photo-7780128.jpeg?auto=compress&cs=tinysrgb&w=1600',
    'https://images.pexels.com/photos/7573942/pexels-photo-7573942.jpeg?auto=compress&cs=tinysrgb&w=1600',
    'https://images.pexels.com/photos/3390587/pexels-photo-3390587.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load'
  ];

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page!.round();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Aesthetic Image Slider'),
        centerTitle: true,
      ),
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          PageView.builder(
            controller: _pageController,
            itemCount: _images.length,
            itemBuilder: (context, index) {
              return Image.network(
                _images[index],
                fit: BoxFit.cover,
              );
            },
          ),
          Positioned(
            bottom: 20,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: _buildPageIndicator(),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> _buildPageIndicator() {
    List<Widget> indicators = [];
    for (int i = 0; i < _images.length; i++) {
      indicators.add(
        Container(
          width: 10,
          height: 10,
          margin: EdgeInsets.symmetric(horizontal: 5),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: _currentPage == i ? Colors.blue : Colors.grey,
          ),
        ),
      );
    }
    return indicators;
  }
}

Create an image slider.

Note: Slide the cursor to the left for viewing the image on the right and slide the cursor to the right for viewing the image on the left.

Code explanation

Lines 1–4: Import the required packages and define the main by sending an instance of ImageSliderApp to the runApp() method.
Line 7: Define the ImageSliderApp class that extends the StatelessWidget class to access its methods and attributes.
Lines 9–11: Override the build method and return a MaterialApp and set the home property to ImageSliderScreen().

Lines 34–35: Create a list object _images that contains the URLs of all the images that will be displayed in the image slider. We can add local files by adding their correct directory path and names.
Lines 25–32: Override the initState() method that initializes the state of the widget when it is created.
Lines 36–38: Add a listener on _pageController to keep track of the pages and save the current page on the _currentPage attribute.
Lines 44–45: Create the app UI in the build method that returns a Scaffold widget containing the basic structure.
Lines 46–48: Set the appBar property to an AppBar widget, which specifies the a title and the backgroundColor.
Lines 50–56: Create a Stack in the body and add a PageView.builder widget that dynamically generates pages for each image instance in the list.
Lines 57–59: Return an Image.network widget that fetches the image from the specified URL and displays it in the given page space.

Lines 63–67: Add a Position widget to set the placement of the image dots on the screen; in this case they are placed in the bottom center, which dynamically changes through _buildPageIndicator() method.
Lines 75–85: Define the _buildPageIndicator() method that uses a for loop to generate the dots based on the total number of images as and the current image.

Code output

Slide the images to the left or right and notice that the images change, and according to the current image, the dots in the bottom center also dynamically change to show which picture number we are on at each slide. The dot turns blue to highlight the position.

How to create an image slider in Flutter

What is an image slider?

Example code

Code explanation

Code output

Real-life application

Summary