Flutter:基于选定的DropdownButton渲染组件列表

lpwwtiir  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(133)

在这里,我试图用Map列表中的信息填充一个自定义组件(尚未创建),如果_dropDownValue是Veg,我计划在一些自定义组件(如列)中显示所有蔬菜菜肴和餐馆的名称。

class _MyAppState extends State<MyApp> {
  bool _somethingEntered = false;

  String _dropDownValue = "";
  late String _enteredInput;

  List<Map<String, dynamic>> list = [
    {"eatery": "Yummpies", "Veg": true, "Name": "Veg Fried Rice"},
    {"eatery": "Yummpies", "Veg": false, "Name": "Chicken Fried Rice"},
    { "eatery" : "BitsAndBytes" , "Veg" : true , "Name" : "Veg Roll" }
  ];

  List<String> fruits = ["apple", "orange", "banana"];

  // This widget is the root of your application.
  void dropDownCallback(String? selectedValue) {
    if (selectedValue is String) {
      setState(() {
        _dropDownValue = selectedValue;
      });
      print('selectedValue - $selectedValue \n');
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Find Your Food"),
          centerTitle: true,
          backgroundColor: Colors.orange[600],
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Center(
            child: ColoredBox(
              color: Colors.amber,
              child: SizedBox(
                height: 400,
                width: 400,
                child: Column(
                  children: [
                    Center(
                        child: Padding(
                      padding: EdgeInsets.all(10.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Container(
                              color: Colors.white,
                              child: TextField(
                                decoration: const InputDecoration(
                                    hintText: "Enter Your Requirements Here",
                                    contentPadding: EdgeInsets.symmetric(
                                        horizontal: 10.0, vertical: 5.0)),
                              )),
                          SizedBox(
                            height: 10.0,
                          ),
                          Container(
                              color: Colors.blue,
                              child: ElevatedButton(
                                onPressed: () {
                                  print("pressed!");
                                },
                                child: Icon(Icons.local_pizza),
                              )),
                          Container(
                            child: DropdownButton(
                              onChanged: dropDownCallback,
                              items: const [
                                DropdownMenuItem(
                                  child: Text("Veg"),
                                  value: "Veg",
                                ),
                                DropdownMenuItem(
                                  child: Text("Non Veg"),
                                  value: "Non Veg",
                                ),
                                DropdownMenuItem(
                                  child: Text('Both'),
                                  value: "Both",
                                )
                              ],
                            ),
                          ),
                          Container(
                            child: Column(
                              children: [
                                /* here i want to display a list of components with name of eatery and name of the dish*/
                              ],
                            )
                          )
                        ],
                      ),
                    )),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

字符串

ljsrvy3e

ljsrvy3e1#

你得到的过滤器列表类似于`

String? _dropDownValue;
  List<Map<String, dynamic>> list = [
    {"eatery": "Yummpies", "Veg": true, "Name": "Veg Fried Rice"},
    {"eatery": "Yummpies", "Veg": false, "Name": "Chicken Fried Rice"},
    {"eatery": "BitsAndBytes", "Veg": true, "Name": "Veg Roll"}
  ];

  late List<Map> vegItems = list.where((element) => element["Veg"]).toList();
  late List<Map> nonVegItems =
      list.where((element) => !element["Veg"]).toList();

字符串
然后显示项目取决于_dropDownValue

Container(
  child: Column(
    children: [
      if (_dropDownValue == "Veg") //you can use if else here
        ...vegItems.map((e) => Text(e["Name"])),
      if (_dropDownValue == "Non Veg")
        ...nonVegItems.map((e) => Text(e["Name"])),
      if (_dropDownValue == "Both")
        ...list.map((e) => Text(e["Name"])),
    ],
  ),
),

相关问题