Automatic Scrolling Image in flutter

Hi, In this Flutter tutorial I am going to explain how to create auto scrolling image view this type of auto scrolling image you can use in any app to show app latest feature and new offer, so let's create flutter auto scrolling image

Add carousel_slider: ^1.3.0 in your pubspec.yaml dependencies. And import it:

import 'package:carousel_slider/carousel_slider.dart';

complete example

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(
      title: 'Flutter ListView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      
      home: Scaffold(
        appBar: AppBar(
          title: Text("ListView Demo"),
        ),
        
        body: Container(
          decoration: BoxDecoration(
            color: Colors.pinkAccent
          ),

          child: CarouselSlider(
            height: 200,
            enableInfiniteScroll: true,
            autoPlay: true,
            autoPlayInterval: Duration(seconds: 2),
            pauseAutoPlayOnTouch: Duration(seconds: 5),
            items: <Widget>[
            FlutterLogo(size:200),FlutterLogo(size:150),FlutterLogo(size:100),
            ],
          ),
        ),
      ),
    );
  }
}
 

You can pass the below params to the class. If you pass the height params, the aspectRatio param will be ignore.

Params #

CarouselSlider(
   items: items,
   height: 400,
   aspectRatio: 16/9,
   viewportFraction: 0.8,
   initialPage: 0,
   enableInfiniteScroll: true,
   reverse: false,
   autoPlay: true,
   autoPlayInterval: Duration(seconds: 3),
   autoPlayAnimationDuration: Duration(milliseconds: 800),
   autoPlayCurve: Curves.fastOutSlowIn,
   pauseAutoPlayOnTouch: Duration(seconds: 10),
   enlargeCenterPage: true,
   onPageChanged: callbackFunction,
   scrollDirection: Axis.horizontal,
 )