Flutter listview horizontal + new line

user_1881719 0
Viewed 3672

I want to implement a horizontal listview in Flutter, but not scrollable. I need it to continue on a new row when the space runs out in the horizontal direction. So far I've only got 

 return ListView.separated(
                separatorBuilder: (BuildContext context, int index) =>
                    const Divider(),
                itemBuilder: (context, index) {
                  return ItemCard(items[index]);
                },
                scrollDirection: Axis.horizontal,
                itemCount: items.length);
flutter android-layout android
2 Answers

In this case, you should try Wrap widget in flutter. By default, it will wrap in horizontal direction but if you want to wrap vertically then you can set direction.

Wrap(
  direction: Axis.vertical,
  children: [
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
    MyWidget(),
  ],
),

With row and column, if there is not enough space then we get the yellow and black overflow warning. But Wrap creates a new adjacent in the respective directive. This will complete your list view requirement.

There are many other options available which you can check here.

user_23936680

set property physics in Listview.separated to make the listview not scrollable And also you need to set the width of the ItemCard() widget

return ListView.separated(physics: NeverScrollablePhysics(),

                separatorBuilder: (BuildContext context, int index) =>
                    const Divider(),
                itemBuilder: (context, index) {
                  return Container(
                    width: //your width size,
                    ItemCard(items[index])
                   );
                },
                scrollDirection: Axis.horizontal,
                itemCount: items.length);
user_77583180
Related