Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ListView.builder scroll item by item in flutter

Tags:

flutter

dart

I have a horizontal ListView and I want to force the user to scroll one item at a time, how can I achieve that?

return Container(
    height: 120.0,
    padding: EdgeInsetsDirectional.only(start: 8.0),
    child: ListView.builder(
           itemBuilder: _buildListItem(),
           scrollDirection: Axis.horizontal,
           itemCount: arrayItems.length,
           ),
);
like image 346
Sami Kanafani Avatar asked Jan 15 '19 13:01

Sami Kanafani


People also ask

How do I scroll to a specific item in ListView Flutter?

All you have to do is set Global Keys for your widgets and call Scrollable. ensureVisible on the key of your widget you want to scroll to. For this to work your ListView should be a finite List of objects. If you are using ListView.

What is itemExtent in Flutter ListView?

itemExtent property Null safety SliverFixedExtentList, the sliver used internally when this property is provided. It constrains its box children to have a specific given extent along the main axis. The prototypeItem property, which allows forcing the children's extent to be the same as the given widget.


1 Answers

Use

physics: PageScrollPhysics(), // in ListView

I couldn't get your code. Try this one and make changes accordingly.

List<String> yourArray = ["A", "B", "C", "D"];

@override
Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width; 
  return Container(
    height: 100,
    child: ListView.builder(
      physics: PageScrollPhysics(), // this is what you are looking for
      scrollDirection: Axis.horizontal,
      itemCount: yourArray.length,
      itemBuilder: (context, index) {
        return Container(
          color: Colors.grey,
          width: width,
          child: Center(child: Text("Index = ${index}")),
        );
      },
    ),
  );
}
like image 175
CopsOnRoad Avatar answered Sep 23 '22 14:09

CopsOnRoad