Programming

Create A Sliding Image or Carousel Image in Flutter

Here’s a powerful way of how you can create an image slide in Flutter, or even build a carousel image which would give your user the ability to slide different images in a particular spot. You can create an image slider in flutter using a package called “carousel_pro” from pub.dev.

This library would also allow you to automatically cache the pictures used in the slider, which is an amazing way to make your application more efficient. Adding multiple images, or items just got easier in your Flutter Application.

Follow the instruction below to create an image slider, as after this guide, You would be be able to have a slider like this sample below.

Flutter Packages Needed

Visit pub.dev to get these packages.

  • Carousel Pro (carousel_pro)

Install the CarouselPro Packages in Pubspec.yaml

Go to your pubspec.yaml file in your project and add the carousel_pro package below your dependency, the same way it is shown below, and add your pictures to the “images” folder.

dependencies:
  flutter:
    sdk: flutter
  carousel_pro: ^1.0.0

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test: 
    sdk: flutter

# The following section is specific to Flutter.
flutter:


  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/c1.jpg
    - images/m1.jpeg
    - images/m2.jpg
    - images/w1.jpeg
    - images/w3.jpeg
    - images/w4.jpeg

Import the Carousel Pro package & Apply the code

Firstly, import your Carousel Pro and Material package to your dart page, See an example below of how you can use the Image Slider package in your App.

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

class ImageSlideHome extends StatefulWidget {
  @override
  _ImageSlideHomeState createState() => _ImageSlideHomeState();
}

class _ImageSlideHomeState extends State<ImageSlideHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Image Slider"),
        centerTitle: true,
      ),
          body: Column(children: <Widget>[

            Container(
          height: 200,
          child: Carousel(
            boxFit: BoxFit.cover,
          images: [
            AssetImage('images/m1.jpeg'),
            AssetImage('images/c1.jpg'),
            AssetImage('images/w3.jpeg'),
            AssetImage('images/w4.jpeg'),
            AssetImage('images/m2.jpg'),
          ],
          autoplay: false,
         // animationCurve: Curves.fastOutSlowIn,
        //  animationDuration: Duration(milliseconds: 1000),
          dotSize: 4.0,
          indicatorBgPadding: 6.0,
          dotBgColor: Colors.transparent,
          ),
          
        ),
        ]
      ),
    );
  }
}

You’d notice that the autoplay is set to false, and that’s what’s make the image not to slide on it’s own. If it’s set to true, then your image would slide with your user having to do that themselves. Well, it depends on the way you want your app to be.

Did you still get an error?, or you were unable to create a slider image through this tutorial, do well to drop a comment below.

Attributes

imagesAll the images on this Carousel
animationCurveThe transition animation timing curve. Default is [Curves.ease]
dotSizeThe base size of the dots. Default is 8.0
dotColorThe Color of each dot. Default is Colors.white
dotBgColorThe background Color of the dots. Default is [Colors.grey[800].withOpacity(0.5)] 
showIndicatorEnable or Disable the indicator (dots). Default is true
borderRadiusEnable/Disable radius Border for the images. Default is false
autoplayEnable/Disable the auto play of the slider. Default true
autoplayDurationDuration of the Auto play slider by seconds. Default 3 seconds 
 dotIncreaseSizeThe increase in the size of the selected dot. Default is 2.0

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.