title: Wrap ListView.separated filter chips in Flutter
body: <p>I'm making a filter screen that uses Filter Chips, I'm trying to Wrap these Chips in multiple lines to avoid clipping/horizontal scrolling but I was unable to achieve that. I tried to put the Wrap() class in the return but they just pile on top of each other instead of being distributed evenly.</p>
  <p>This is my current code:</p>
  <pre><code>import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  
  class Screen1 extends StatefulWidget {
    @override
    _Screen1State createState() =&gt; _Screen1State();
  }
  
  class _Screen1State extends State&lt;Screen1&gt; {
    var data = ['Chip 1', 'Chip 2', 'Chip 3', 'Chip 4', 'Chip 5'];
    var selected = [];
  
    @override
    Widget build(BuildContext context) {
      Size size = MediaQuery.of(context).size;
      return Scaffold(
        appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.black87,
          ),
          leading: IconButton(
            icon: Icon(Icons.close),
          ),
          centerTitle: true,
          title: Text(
            'Screen',
            style: TextStyle(
              color: Colors.black87,
              fontWeight: FontWeight.bold,
            ),
          ),
          backgroundColor: Colors.green,
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              Center(
                child: Row(
                  children: &lt;Widget&gt;[
                    Text(
                      &quot;Label 1&quot;,
                    ),
                  ],
                ),
              ),
              SizedBox(height: size.height * 0.02),
              Container(
                height: size.height * 0.05,
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: data.length,
                  separatorBuilder: (BuildContext context, int index) {
                    return SizedBox(
                      width: size.width * 0.03,
                    );
                  },
                  itemBuilder: (BuildContext context, int index) =&gt; FilterChip(
                    padding: EdgeInsets.all(10),
                    label: Text(
                      data[index],
                      style: TextStyle(fontSize: 20),
                    ),
                    onSelected: (bool value) {
                      if (selected.contains(index)) {
                        selected.remove(index);
                      } else {
                        selected.add(index);
                      }
                      setState(() {});
                    },
                    selected: selected.contains(index),
                    selectedColor: Colors.deepOrange,
                    labelStyle: TextStyle(
                      color: Colors.white,
                    ),
                    backgroundColor: Colors.green,
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Q2zb0.png" rel="nofollow noreferrer">This is my current screen</a></p>
  <p><a href="https://i.stack.imgur.com/CibYK.png" rel="nofollow noreferrer">This is the desired result</a></p>