Flutter：如何默认选中列表中的首个Filter Chip？

要让第一个筛选芯片默认选中，只需在初始化选中列表gender时，把items2的第一个元素加入即可，具体有两种实现方式：

方式一：直接初始化列表 #

修改gender的初始值，直接包含items2的第一个元素：

final items2 = ["Both", "Boy", "Girl", "Infant"];
List<String> gender = [items2.first]; // 默认选中第一个选项

方式二：在StatefulWidget的initState中初始化（适配动态数据场景） #

如果你的页面是StatefulWidget，推荐在initState方法中添加初始选中项，这种方式更灵活，能兼容items2动态加载的情况：

class YourScreen extends StatefulWidget {
  const YourScreen({super.key});

  @override
  State<YourScreen> createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  final items2 = ["Both", "Boy", "Girl", "Infant"];
  List<String> gender = [];

  @override
  void initState() {
    super.initState();
    // 先判断列表非空，避免空指针异常
    if (items2.isNotEmpty) {
      gender.add(items2.first);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Wrap(
        spacing: 8,
        runSpacing: 8,
        children: items2
            .map(
              (e) => FilterChip(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  backgroundColor: Colors.white,
                  selectedColor: const Color(0xff6fedf6),
                  label: Container(
                    height: 46,
                    width: 50,
                    alignment: Alignment.center,
                    child: Text(e),
                  ),
                  labelStyle: GoogleFonts.poppins(
                    textStyle: const TextStyle(
                      color: Colors.black,
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 0.5,
                    ),
                  ),
                  selected: gender.contains(e),
                  onSelected: (bool value) {
                    if (gender.contains(e)) {
                      gender.remove(e);
                    } else {
                      gender.add(e);
                    }
                    setState(() {});
                  }),
            )
            .toList(),
      ),
    );
  }
}

原理说明 #

FilterChip的selected属性通过gender.contains(e)判断选中状态，所以只要初始时gender列表包含第一个元素，对应的芯片就会默认处于选中状态。

内容的提问来源于stack exchange，提问作者Divya