Flutter horizontal scroll one item at one

Question

DISCLAIMER :- New in flutter community

In native android code i have done similar job using gesture detector but i am wondering how can achieve same effects in flutter as well. like i have list of cards in horizontal list and when user scroll the list only one item should scroll at one time. any idea or suggestion to achieve this will be much appreciated.

Higgs

You can use PageControl to achieve same. – Constitutional

Answer 1

I would suggest you to look into PageView.

With this, you can convert the card list into PageView's children, where it will give you one-page swipe at a time. It will look like this:

final controller = PageController(
  initialPage: 0,
);

final pageView = PageView(
  controller: controller,
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    // your card list here
  ],
  onPageChanged: (index) =>
    setState(() => selectedPageIndex = index),
);

Becnel

Answer 2

You can use simple ListView Widget with property: physics: PageScrollPhysics()

    ListView(
        physics: PageScrollPhysics(),   
        children: [
        //Your list elements here
        ],   
    )

Wacke

Omg this is exactly what i needed, thank you! I can also keep Listview.builder alive too. Thank you so much!! 🤭 👍 – Wb

Answer 3

I have achieved this with scroll_snap_list package. You need to set a fixed item size and based on that fixed size, it is scrolled.

    ScrollSnapList(
          selectedItemAnchor: SelectedItemAnchor.START,
          itemSize: 163,
          onItemFocus: (index) {},
          duration: 300,
          scrollDirection: Axis.horizontal,
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              width: 155,
              height:155,
            );
          },
        ),

Benzidine

Answer 4

You might want to look at the flutter_swiper plugin.

Vivacious