Flutter wrap listview builder

Flutter Wrap with ListView.builder

In Flutter, the Wrap widget allows you to create a flow layout where children are arranged sequentially based on the available space. It automatically wraps the children to the next line if they exceed the width of the container. When combined with ListView.builder, it becomes a powerful way to create a scrolling list of items with a wrapping layout.

Example

Let’s say you have a list of items that you want to display in a scrolling list, but you also want to wrap the items if they don’t fit the available width.

class MyList extends StatelessWidget {
  final List items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: EdgeInsets.all(8.0),
          child: Material(
            elevation: 4,
            borderRadius: BorderRadius.circular(8),
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                items[index],
                style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        );
      },
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      padding: EdgeInsets.all(16.0),
      physics: ClampingScrollPhysics(),
    );
  }
}

// Usage
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Wrap with ListView.builder'),
    ),
    body: Wrap(
      children: [
        MyList(),
      ],
    ),
  );
}
  

In the example above, we define a MyList class that extends StatelessWidget. This widget represents the individual item in the list, and it’s wrapped inside a Padding widget to provide some spacing around each item. The items are displayed using a Text widget. You can customize this based on your requirements.

The MyList class also contains a list of strings, each representing an item. We use the ListView.builder widget to dynamically build the items based on the length of this list. The itemBuilder callback is called for each item in the list, and we create a Material widget to give it a card-like appearance. Inside the Material, we have a Padding widget that surrounds the Text widget displaying the item’s name.

To use the MyList class within a Wrap, we wrap it inside a Wrap widget and provide it as a child. The Wrap widget automatically arranges the children in a wrapping layout, allowing items to flow to the next line when necessary. We can further customize the appearance and behavior of the Wrap widget based on our requirements.

Finally, we can include this wrapped list within the body of a Scaffold widget to display it on the screen. In this example, we also have an AppBar with a title to provide a complete layout structure.

Remember to import the necessary packages and dependencies for Flutter to use these widgets, such as material.dart and flutter/material.dart.