I was using this plugin nigerian_states_and_lga: to display a list of states and their local governments in my app until today that the backend team decided to come up with their own API that they developed for that and I am finding it difficult to implement it. What I did was that when you select on a state, another dropdownbutton will display the local government based on the state that was selected. Now they want me to do the same thing using their own API. They want the first dropdownbutton to display a list of all the states as contained in their API and when the user select on any state, the Id of that state should be picked and then used in querying another endpoint that returns a list of local government based on the state Id that was passed and display the list of those local government immediately in the seconde dropdownbutton.
The model class here is the format for the API response and this dropdownbutton2 is the one that I did with the plugins so I am looking for the way to substitute this with the new approach that they demand.
String stateValue = NigerianStatesAndLGA.allStates[0];
String lgaValue = 'Select a Local Government Area';
String selectedLGAFromAllLGAs = NigerianStatesAndLGA.getAllNigerianLGAs()[0];
List<String> statesLga = [];
Widget buildStateAndLgaDropDownButton(){
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Select a state',
style: GoogleFonts.inter(
fontSize: 14.0,
color: Colors.black,
height: 1.0,
),
),
const SizedBox(
height: 8,
),
Container(
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.black.withOpacity(0.6))
),
child: DropdownButtonHideUnderline(
child: DropdownButton2<String>(
key: const ValueKey('States'),
value: stateValue,
isExpanded: true,
hint: const Text('Select a state'),
items: NigerianStatesAndLGA.allStates
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value,
style: GoogleFonts.inter(
fontSize: 14.0,
color: Colors.black,
height: 1.0,
)),
);
}).toList(),
onChanged: (val) {
lgaValue = 'Select a Local Government Area';
statesLga.clear();
statesLga.add(lgaValue);
statesLga.addAll(NigerianStatesAndLGA.getStateLGAs(val!));
setState(() {
stateValue = val;
});
},
buttonStyleData: ButtonStyleData(
padding: const EdgeInsets.symmetric(horizontal: 16),
height: 50,
width: MediaQuery.of(context).size.width,
),
dropdownStyleData: DropdownStyleData(
maxHeight: 200,
isOverButton: true,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(0, 3))
]),
),
menuItemStyleData: const MenuItemStyleData(
height: 40,
),
),
),
),
const SizedBox(
height: 20,
),
Container(
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.black.withOpacity(0.6))
),
child: DropdownButtonHideUnderline(
child: DropdownButton2<String>(
key: const ValueKey('Local governments'),
value: lgaValue,
isExpanded: true,
hint: const Text('Select a Lga'),
items:
statesLga.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value,
style: GoogleFonts.inter(
fontSize: 14.0,
color: Colors.black,
height: 1.0,
),),
);
}).toList(),
onChanged: (val) {
setState(() {
lgaValue = val!;
});
},
buttonStyleData: ButtonStyleData(
padding: const EdgeInsets.symmetric(horizontal: 16),
height: 50,
width: MediaQuery.of(context).size.width,
),
dropdownStyleData: DropdownStyleData(
maxHeight: 200,
isOverButton: true,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(0, 3))
]),
),
menuItemStyleData: const MenuItemStyleData(
height: 40,
),
),
),
),
]);
}
class StateResponse{
int? code;
String? message;
String? title;
List<StateData>? data;
StateResponse(this.code,this.title,this.message,this.data);
StateResponse.fromJson(Map<String,dynamic>json){
code = json['code'];
message = json['message'];
title = json['title'];
if(json['data'] !=null){
data = [];
json['data'].forEach((e){
data!.add(StateData.fromJson(e));
});
}
}
}
class StateData{
int? id;
String? name;
int? countryId;
StateData(this.id,this.name,this.countryId);
StateData.fromJson(Map<String,dynamic>json){
id=json['id'];
name = json['name'];
countryId = json['country_id'];
}
}