How to use menu like FilterChip in Flutter
Asked Answered
C

0

6

Is there any way to achieve the following effect?

Chips-Material Design 3

I try to use dropdownmenu, but failed

this is my code(flutter 3.3, useMaterial3: true):

ps: forgive my ugly english..

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!);
          },
        ),
      ),
    );
  }
}

Cronus answered 4/9, 2022 at 11:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.