在 Flutter 中包裹 ListView.separated 过滤芯片

Question

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.

This is my current code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  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: <Widget>[
            Center(
              child: Row(
                children: <Widget>[
                  Text(
                    "Label 1",
                  ),
                ],
              ),
            ),
            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) => 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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is my current screen

This is the desired result

Answer 1

you need to use the widget Wrap for filter Chip....

look at the tutorial

the wrap widget tutorial