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