如何在Flutter中使用像FilterChip这样的菜单

Question

有什么办法可以达到下面的效果吗？

芯片-材料设计3

我尝试使用下拉菜单，但失败了

这是我的代码（flutter 3.3，useMaterial3: true）：

ps：原谅我丑陋的英语..

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> list = ['flutter', 'material', 'dart', 'django'];
  String selectedValue = 'flutter';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          value: selectedValue,
          // icon: Container(),
          underline: Container(),
          selectedItemBuilder: (context) => list
              .map((e) => FilterChip(
                    showCheckmark: true,
                    selected: e == selectedValue,
                    label: Text(e),
                    onSelected: (value) {},
                  ))
              .toList(),
          items: list
              .map((e) => DropdownMenuItem(
                    value: e,
                    child: Text(e),
                  ))
              .toList(),
          onChanged: (value) {
            setState(() => selectedValue = value!);
          },
        ),
      ),
    );
  }
}

Answer 1

我也需要它，所以我找了，但是没有，所以我做了。

网页和github源码注释都是日文的，请尽量翻译一下

https://gist.github.com/take4blue/3d7ae94154a1d4fd6eb60b908e31a7ab

https://take4-blue.com/program/flutter-dart/flutter-%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80 %e3%82%a6%e3%83%b3%e3%83%9c%e3%82%bf%e3%83%b3%e6%a7%98%e5%bc%8f%e3%81%aefilterchip/