I am using a package called dropdown_search, which I need to make the first dropdown_search show me the regions of my country and when selecting an item in the second dropdown_search it shows their respective communes.
The problem I have is that it doesn't show it to me in the dropdown_search, because when doing a debug I see that the data reaches that dropdown_search.
I'm using GetX but I still don't understand it very well. If you have any suggestions or improvements I would appreciate it.
Controller
class HomeController extends GetxController {
var regionList = <Region>[].obs;
List<Commune> comunas = <Commune>[].obs;
Future<List<Region>> getRegiones() async {
var response = await rootBundle.loadString('assets/response.json');
var results = (jsonDecode(response)['regions'] ?? []) as List;
return results.map((x) => Region.fromJson(x)).toList();
}
@override
Future<void> onInit() async {
// TODO: implement onInit
super.onInit();
regionList.assignAll(await getRegiones());
}
Home
class HomePage extends GetView<HomeController> {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
var title = "HomePage";
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(26),
child: FutureBuilder<List<Region>>(
future: controller.getRegiones(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: [
Obx(
() {
HomeController controller = Get.put(HomeController());
return controller.regionList.isEmpty
? const Center(
child: Text('No hay regiones'),
)
: DropdownSearch<Region>(
popupProps:
const PopupProps.menu(showSearchBox: true),
asyncItems: (String filter) =>
controller.getRegiones(),
itemAsString: (Region u) => u.name ?? "",
onChanged: (Region? data) {
if (data?.communes != null &&
data!.communes.isNotEmpty) {
controller.comunas = data.communes;
print(controller.comunas
.map((e) => e.name)
.toList());
// comunas = [];
// for (var item in listaComunas) {
// comunas?.add(item);
// }
}
},
dropdownDecoratorProps:
const DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(
labelText: "Region",
hintText: "Seleccione una region",
),
),
);
},
),
Obx(() => DropdownSearch<String>(
popupProps: const PopupProps.menu(
showSelectedItems: true,
),
items: controller.comunas.map((e) => e.name).toList(),
dropdownDecoratorProps: const DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(
labelText: "Comuna",
hintText: "Seleccione una comuna",
),
),
onChanged: print,
selectedItem: controller.comunas.isNotEmpty == true
? controller.comunas[0].name
: null))
],
);
} else {
return const CircularProgressIndicator();
}
}),
)));
}
}
Model
import 'dart:convert';
Regiones regionesFromJson(String str) => Regiones.fromJson(json.decode(str));
String regionesToJson(Regiones data) => json.encode(data.toJson());
class Regiones {
Regiones({
required this.name,
required this.regions,
});
String name;
List<Region> regions;
factory Regiones.fromJson(Map<String, dynamic> json) => Regiones(
name: json["name"],
regions:
List<Region>.from(json["regions"].map((x) => Region.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"name": name,
"regions": List<dynamic>.from(regions.map((x) => x.toJson())),
};
}
class Region {
Region({
required this.name,
required this.romanNumber,
required this.number,
required this.abbreviation,
required this.communes,
});
String? name;
String? romanNumber;
String? number;
String? abbreviation;
List<Commune> communes;
factory Region.fromJson(Map<String, dynamic> json) => Region(
name: json["name"],
romanNumber: json["romanNumber"],
number: json["number"],
abbreviation: json["abbreviation"],
communes: List<Commune>.from(
json["communes"].map((x) => Commune.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"name": name,
"romanNumber": romanNumber,
"number": number,
"abbreviation": abbreviation,
"communes": List<dynamic>.from(communes.map((x) => x.toJson())),
};
}
class Commune {
Commune({
required this.name,
required this.identifier,
});
String name;
String identifier;
factory Commune.fromJson(Map<String, dynamic> json) => Commune(
name: json["name"],
identifier: json["identifier"] ?? '',
);
Map<String, dynamic> toJson() => {
"name": name,
"identifier": identifier,
};
}
Json
{
"name": "Chile",
"regions": [
{
"name": "Arica y Parinacota",
"romanNumber": "XV",
"number": "15",
"abbreviation": "AP",
"communes": [
{ "name": "Arica", "identifier": "XV-1" },
{ "name": "Camarones", "identifier": "XV-2" },
{ "name": "General Lagos", "identifier": "XV-3" },
{ "name": "Putre", "identifier": "XV-4" }
]
},
{...
Update it already loads the data in the second dropdown, but I have to do a Hot Reload to show it, why does this happen?