Flutter – Drop down Menu Data set from api

I’ve added the whole code from my own project. Think, test, and try to customize yourself.

API services

//Division API - replaice your own model instade of DistrictModel
var divisionUrl = "$baseURL/location/division";

Future<DivisionModel?> getDivition() async {
  var res = await http.get(Uri.parse(divisionUrl));
  var divitionStatusCode = res.statusCode;
  print("Divition status code $divitionStatusCode");
  if (res.statusCode == 200) {
    DivisionModel division = divisionModelFromJson(res.body);
    return division;
  }
  return null;
}

//district API 
Future<DistrictModel?> getDistrict(String divisionId) async { 
  final uri = Uri.parse(
      '$baseURL/location/district?division_id=$divisionId');
  final response = await http.get(uri);

  var districtStatusCode = response.statusCode;
  print("District status code $districtStatusCode");
  if (response.statusCode == 200) {
    DistrictModel district = districtModelFromJson(response.body);
    return district;
  } else {
    return null;
  }
}

Here is how I called and implement API response in the dropdown.

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

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  List<Divition> listOfDivition =
      []; //get all the divition from api in this list
  String? selectedDivition; //get selected divition id

  @override
  void initState() {
    loadingDivition(); //load the divition data first
    super.initState();
  }

  var isLoading = true; //to check the API is loading or not
  loadingDivition() async {
    //binding with the diviton Url
    DivisionModel? divition = await getDivition();
    setState(() {
      listOfDivition = divition!.data;
      isLoading = false; //after getting the Data loading will be false
    });
  }

  List<District> listOfDistrict =
      []; //get all the district from api in this list
  String? selectedDistrict;

  loadingDistrict() async {
    DistrictModel? district = await getDistrict(selectedDivition.toString());
    setState(() {
      listOfDistrict = district!.data;
      isLoading = false;
    });
  }

  GlobalKey<FormState> registerFormKey = GlobalKey<FormState>();

  String? divitionValue = "";
  String? districtValue = "";

  Future<void> publicUserRegister() async {
    if (selectedDivition!.isNotEmpty && selectedDistrict!.isNotEmpty) {
      var registerData = {
        "division_id": selectedDivition,
        "district_id": selectedDistrict
      };

      var response = await registerUser(registerData);

      var body = jsonDecode(response.body);
      var responseMsg = body['message'];
      print(responseMsg);
    } else {
      print("All fields are required!");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffffffff),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Form(
          key: registerFormKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              DropdownButtonFormField(
                hint: const Text(
                  "-- Select Divition --",
                ),
                value: selectedDivition,
                onChanged: (value) {
                  selectedDistrict = null;
                  setState(() {
                    selectedDivition = value;
                    loadingDistrict();
                    isLoading = true;
                  });
                },
                onSaved: (value) {
                  setState(() {
                    divitionValue = value;
                  });
                },
                items: listOfDivition.map((e) {
                  return DropdownMenuItem(
                    value: e.id.toString(),
                    child: Text(e.nameBn),
                  );
                }).toList(),
              ),
              DropdownButtonFormField(
                hint: const Text(
                  "-- Select District --",
                ),
                value: selectedDistrict,
                onChanged: (value) {
                  setState(() {
                    selectedDistrict = value;
                  });
                },
                onSaved: (value) {
                  setState(() {
                    districtValue = value;
                  });
                },
                validator: (String? value) {
                  if (value!.isEmpty) {
                    return "can't empty";
                  } else {
                    return null;
                  }
                },
                items: listOfDistrict.map((e) {
                  return DropdownMenuItem(
                    value: e.id.toString(),
                    child: Text(e.nameBn),
                  );
                }).toList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}