Search code examples
flutterswipecarousel-slider

How to slow down scroll velocity in flutter


I am trying to implement a slower scroll velocity in carousel_slider widget, or some better snapping. the problem is that if the user does a very fast swipe motion a couple of items will be scrolled instead of snapping tot he next one. i want to eliminate that behavior.

I'm not sure if it helps but I'm adding the code bellow:

// Automatic FlutterFlow imports
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class ModelCarousel extends StatefulWidget {
  // final List<String> iconUrlList;
  final double modelSize;
  final Function(int index)? onItemTapped;
  final int selectedIndex;
  const ModelCarousel(
      {Key? key,
      // required this.iconUrlList,
      required this.modelSize,
      required this.selectedIndex,
      this.onItemTapped})
      : super(key: key);

  @override
  _ModelCarouselState createState() => _ModelCarouselState();
}

class _ModelCarouselState extends State<ModelCarousel> {
  ScrollPhysics _scrollPhysics = const PageScrollPhysics();

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(color: Colors.red),
        height: 350,
        child: CarouselSlider.builder(
            itemCount: 5,
            options: CarouselOptions(
              height: 400.0,
              pageSnapping: true,
              scrollPhysics: _scrollPhysics,
            ),
            itemBuilder: (BuildContext context, int index, int pageViewIndex) {
              return Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    image: DecorationImage(
                      image: AssetImage("assets/temp_images/model.png"),
                      fit: BoxFit.cover,
                    ),
                  ),
                  child: Text(
                    'text $index',
                    style: TextStyle(fontSize: 16.0),
                  ));
            })
        );
  }

  Widget modelTile() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(100, 0, 100, 0),
      child: Container(
        width: 200,
        decoration: BoxDecoration(
          color: Colors.transparent,
          image: DecorationImage(
            image: AssetImage("assets/temp_images/model.png"),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}


Solution

  • i found a solution: I have changed the viewportFraction property to 0.98 for CarouselOptions class. this didn't change the speed but did have the desired effect, user now cant swipe more than one item.