Flutter listview 水平 + 换行

Question

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);

Answer 1

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 .

Answer 2

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);