How to slow down scroll velocity in flutter

Question

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,
          ),
        ),
      ),
    );
  }
}

this has been answered previously, check the link below https://stackoverflow.com/a/70358601/11948079 — odinachi, Feb 05 '23 at 15:55
Maybe i don't understand the solution but this doesn't seem to solve my problem — Tom Cohen, Feb 05 '23 at 16:04

score 0 · Accepted Answer · answered Feb 05 '23 at 16:18

0

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.

answered Feb 05 '23 at 16:18

Tom Cohen

79
6

How to slow down scroll velocity in flutter

1 Answers1