Open iamkunalpitale opened 4 years ago
To achieve a one-circle-at-a-time scroll behaviour, I would recommend using a custom ScrollPhysics
which extends CircleFixedExtentScrollPhysics
.
class CustomScrollPhysics extends CircleFixedExtentScrollPhysics {
const CustomScrollPhysics ({ScrollPhysics parent}) : super(parent: parent);
@override
double get minFlingVelocity => double.infinity;
@override
double get maxFlingVelocity => double.infinity;
@override
double get minFlingDistance => double.infinity;
@override
CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
return CustomScrollPhysics (parent: buildParent(ancestor));
}
}
The CustomScrollPhysics
can then be passed to the CircleListScrollView
as shown below.
CircleListScrollView(
physics: CustomScrollPhysics(),
axis: Axis.horizontal,
itemExtent: 175,
children: List.generate(
5,
(int i) => Center(
// feel free to design each item as you wish here...
child: Container(
width: 175,
height: 175,
color: Colors.blue,
),
),
),
radius: MediaQuery.of(context).size.width * .65,
),
Source: StackOverflow
How to show one circle at a time its moving too fast??? Speed make it slow??