创建一个州，城市下拉菜单，基于所选状态显示城市下拉菜单的值？

Question

创建一个州（城市）下拉列表，基于选定的状态，API请求将触发并显示响应（以城市下拉列表的值显示），对此有任何想法吗？

Answer 1

您可以通过以下方式使用Dropdown来实现预期的效果。

import 'package:flutter/material.dart';

class DropDown extends StatefulWidget {
  @override
  _DropDownState createState() => _DropDownState();
}

class _DropDownState extends State<DropDown> {


  Map<String, String> stateCity = {
    "Surat": "Gujarat",
    "Ahmadabad": "Gujarat",
    "Vadodara": "Gujarat",
    "Mp1": "Mp",
    "Mp2": "Mp",
    "Up1": "Up",
    "Up2": "Up",
    "Up3": "Up",
  };

  List<String> state = ['Gujarat','Mp','Up'];
  List<String>  city= [];

  String selectedState;
  String selectedcity;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              DropdownButton(
                onChanged: (value) {
                  setState(() {
                    selectedState = value;
                    selectedcity =null;
                    city.clear();
                    stateCity.forEach((k,v){
                      print(k);
                      if(selectedState==v){
                        city.add(k);
                      }
                     });
                  });
                },
                value: selectedState,
                items: state
                    .map((state) => DropdownMenuItem(
                          child: Text(state),
                          value: state,
                        ))
                    .toList(),
              ),
              DropdownButton(
                onChanged: (value) {
                  setState(() {
                    selectedcity = value;
                  });
                  print(value);
                },
                value: selectedcity,
                items: selectedState !=  null ? city.map((city) => DropdownMenuItem(child: Text(city),value: city,)).toList(): [],
              )
            ],
          ),
        ),
      ),
    );
  }
}