circle_wheel_scroll icon indicating copy to clipboard operation
circle_wheel_scroll copied to clipboard

Show one circle at a time

Open iamkunalpitale opened this issue 4 years ago • 1 comments

How to show one circle at a time its moving too fast??? Speed make it slow??

iamkunalpitale avatar Mar 24 '20 05:03 iamkunalpitale

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

Zamorite avatar Oct 31 '20 10:10 Zamorite