SingleChildScrollView - Moving from Image to Image

Question

I have few images to display within a SizedBox, which is wrapped around a SingleChildScrollView contained in a Row widget. At the moment it is able to display fine, but stopping in between images during swiping. What I want to achieve is whenever a drag is detected, Left or Right, move to next or previous image and centered the image.

Is there a way to achieve it? should I replace it with GestureDetector, but I can't seem to wrap my head around how when drag is detected a given distance is moved.

Overall Code layout is as follow:

SizedBox:
  SingleChildScrollView
    Row:
      Image_1
      Image_2
      ...

It would be easier to answer if you could include your code and show what you already tried. — frankenapps, Feb 24 '21 at 14:03

score 0 · Answer 1 · answered Feb 24 '21 at 14:32

It will be very difficult for your to do this alone. I would suggest you to use some plugin to do it. I would suggest carousel_slider : carousel_slider

CarouselSlider.builder(
  itemCount: 15,
  itemBuilder: (BuildContext context, int itemIndex) =>
    Container(
      child: Text(itemIndex.toString()),
    ),
)

SingleChildScrollView - Moving from Image to Image

1 Answers1