dependent_multiselect_search_dropdown 1.2.1 copy "dependent_multiselect_search_dropdown: ^1.2.1" to clipboard
dependent_multiselect_search_dropdown: ^1.2.1 copied to clipboard

A customizable Flutter widget for cascading, multi-select, dependent and searchable dropdowns with dynamic updates.

example/lib/main.dart

import 'package:dependent_multiselect_search_dropdown/dependent_multiselect_search_dropdown.dart'
    show CascadingDropdown, DropdownController, DropdownItem;
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ExampleDropdownScreen(),
    );
  }
}

class ExampleDropdownScreen extends StatefulWidget {
  const ExampleDropdownScreen({super.key});
  @override
  State<ExampleDropdownScreen> createState() => _ExampleDropdownScreenState();
}

class _ExampleDropdownScreenState extends State<ExampleDropdownScreen> {
  final countryController = DropdownController<String>();
  final stateController = DropdownController<String>();
  final cityController = DropdownController<String>();
  final hospitalController = DropdownController<String>();
  final managerController = DropdownController<String>();

  bool isStateEnabled = false;
  bool isCityEnabled = false;
  bool isHospitalEnabled = false;
  bool isManagerEnabled = false;

  final allCountries = [
    DropdownItem(id: "1", name: "India", value: "India"),
    DropdownItem(id: "2", name: "USA", value: "USA"),
  ];

  final allStates = {
    "1": [
      DropdownItem(id: "1", name: "Gujarat", value: "Gujarat"),
      DropdownItem(id: "2", name: "Maharashtra", value: "Maharashtra"),
    ],
    "2": [
      DropdownItem(id: "3", name: "California", value: "California"),
      DropdownItem(id: "4", name: "Texas", value: "Texas"),
    ],
  };

  final allCities = {
    "1": [
      DropdownItem(id: "1", name: "Ahmedabad", value: "Ahmedabad"),
      DropdownItem(id: "2", name: "Surat", value: "Surat"),
    ],
    "2": [
      DropdownItem(id: "3", name: "Pune", value: "Pune"),
      DropdownItem(id: "4", name: "Mumbai", value: "Mumbai"),
    ],
    "3": [
      DropdownItem(id: "5", name: "Los Angeles", value: "LA"),
      DropdownItem(id: "6", name: "San Diego", value: "San Diego"),
    ],
    "4": [
      DropdownItem(id: "7", name: "Houston", value: "Houston"),
      DropdownItem(id: "8", name: "Dallas", value: "Dallas"),
    ],
  };

  final allHospitals = {
    "1": [
      DropdownItem(id: "1", name: "Apollo Hospital", value: "Apollo"),
      DropdownItem(id: "2", name: "CIMS", value: "CIMS"),
    ],
    "2": [DropdownItem(id: "3", name: "Surat Hospital", value: "SuratHosp")],
    "3": [DropdownItem(id: "4", name: "Ruby Hall", value: "Ruby")],
    "4": [
      DropdownItem(id: "5", name: "Mumbai Central", value: "MumbaiCentral"),
    ],
    "5": [DropdownItem(id: "6", name: "LA Care", value: "LACare")],
    "6": [DropdownItem(id: "7", name: "San Diego Clinic", value: "SDC")],
    "7": [DropdownItem(id: "8", name: "Houston Med", value: "HoustonMed")],
    "8": [DropdownItem(id: "9", name: "Dallas Health", value: "DallasHealth")],
  };

  final allManagers = {
    "1": [
      DropdownItem(id: "1", name: "Dr. Mehta", value: "Mehta"),
      DropdownItem(id: "2", name: "Dr. Patel", value: "Patel"),
    ],
    "2": [
      DropdownItem(id: "3", name: "Dr. Sharma", value: "Sharma"),
      DropdownItem(id: "4", name: "Dr. Jain", value: "Jain"),
    ],
    "4": [DropdownItem(id: "5", name: "Dr. Reddy", value: "Reddy")],
    "6": [
      DropdownItem(id: "6", name: "Dr. Watson", value: "Watson"),
      DropdownItem(id: "7", name: "Dr. Bruce", value: "Bruce"),
    ],
    "8": [DropdownItem(id: "8", name: "Dr. Strange", value: "Strange")],
    "9": [DropdownItem(id: "9", name: "Dr. House", value: "House")],
  };

  @override
  void initState() {
    super.initState();
    countryController.setOptions(List.from(allCountries));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Cascading Dropdown Example")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            CascadingDropdown<String>(
              controller: countryController,
              hintText: "Select Country",
              searchHint: "Search Country",
              validateHint: "Please select at least one country",
              isMultiSelect: true,
              onItemsChanged: (selected) {
                final states = <DropdownItem<String>>[];
                for (var c in selected) {
                  states.addAll(allStates[c.id] ?? []);
                }
                setState(() {
                  // stateController.setOptions(states);
                  stateController.setOptions([
                    ...states,
                  ]); // Forces rebuild with new list reference
                  stateController.clearSelection();
                  isStateEnabled = selected.isNotEmpty;

                  cityController.clearSelection();
                  cityController.setOptions([]);
                  isCityEnabled = false;

                  hospitalController.clearSelection();
                  hospitalController.setOptions([]);
                  isHospitalEnabled = false;

                  managerController.clearSelection();
                  managerController.setOptions([]);
                  isManagerEnabled = false;
                });
              },
            ),
            const SizedBox(height: 16),
            CascadingDropdown<String>(
              controller: stateController,
              hintText: "Select State",
              searchHint: "Search State",
              validateHint: "Please select a state",
              isMultiSelect: true,
              isEnabled: isStateEnabled,
              onItemsChanged: (selected) {
                final cities = <DropdownItem<String>>[];
                for (var s in selected) {
                  cities.addAll(allCities[s.id] ?? []);
                }
                setState(() {
                  cityController.setOptions(cities);
                  cityController.clearSelection();
                  isCityEnabled = selected.isNotEmpty;

                  hospitalController.clearSelection();
                  hospitalController.setOptions([]);
                  isHospitalEnabled = false;

                  managerController.clearSelection();
                  managerController.setOptions([]);
                  isManagerEnabled = false;
                });
              },
            ),
            const SizedBox(height: 16),
            CascadingDropdown<String>(
              controller: cityController,
              hintText: "Select City",
              searchHint: "Search City",
              validateHint: "Please select a city",
              isMultiSelect: true,
              isEnabled: isCityEnabled,
              onItemsChanged: (selected) {
                final hospitals = <DropdownItem<String>>[];
                for (var c in selected) {
                  hospitals.addAll(allHospitals[c.id] ?? []);
                }
                setState(() {
                  hospitalController.setOptions(hospitals);
                  hospitalController.clearSelection();
                  isHospitalEnabled = selected.isNotEmpty;

                  managerController.clearSelection();
                  managerController.setOptions([]);
                  isManagerEnabled = false;
                });
              },
            ),
            const SizedBox(height: 16),
            CascadingDropdown<String>(
              controller: hospitalController,
              hintText: "Select Hospital",
              searchHint: "Search Hospital",
              validateHint: "Please select a hospital",
              isMultiSelect: true,
              isEnabled: isHospitalEnabled,
              onItemsChanged: (selectedHospitals) {
                setState(() {
                  managerController.clearSelection();
                  managerController.setOptions([]);

                  final List<DropdownItem<String>> managers = [];

                  for (var h in selectedHospitals) {
                    if (h.id == "1" || h.id == "3") {
                      managers.addAll([
                        DropdownItem(
                          id: "1",
                          name: "Dr. Mehta",
                          value: "Mehta",
                        ),
                        DropdownItem(
                          id: "2",
                          name: "Dr. Patel",
                          value: "Patel",
                        ),
                      ]);
                    } else if (h.id == "2" || h.id == "5") {
                      managers.addAll([
                        DropdownItem(
                          id: "3",
                          name: "Dr. Sharma",
                          value: "Sharma",
                        ),
                        DropdownItem(id: "4", name: "Dr. Jain", value: "Jain"),
                      ]);
                    } else if (h.id == "4" || h.id == "6") {
                      managers.addAll([
                        DropdownItem(
                          id: "5",
                          name: "Dr. Reddy",
                          value: "Reddy",
                        ),
                      ]);
                    } else if (h.id == "7") {
                      managers.addAll([
                        DropdownItem(
                          id: "6",
                          name: "Dr. Watson",
                          value: "Watson",
                        ),
                        DropdownItem(
                          id: "7",
                          name: "Dr. Bruce",
                          value: "Bruce",
                        ),
                      ]);
                    } else if (h.id == "8") {
                      managers.addAll([
                        DropdownItem(
                          id: "8",
                          name: "Dr. Strange",
                          value: "Strange",
                        ),
                      ]);
                    } else if (h.id == "9") {
                      managers.addAll([
                        DropdownItem(
                          id: "9",
                          name: "Dr. House",
                          value: "House",
                        ),
                      ]);
                    }
                  }

                  managerController.setOptions(managers);
                  isManagerEnabled = selectedHospitals.isNotEmpty;
                });
              },
            ),
            const SizedBox(height: 16),
            CascadingDropdown<String>(
              controller: managerController,
              hintText: "Select Manager",
              searchHint: "Search Manager",
              validateHint: "Please select at least one manager",
              isMultiSelect: true,
              isEnabled: isManagerEnabled,
              onItemsChanged: (selectedManagers) {
                if (selectedManagers.isEmpty) {
                  setState(() {
                    hospitalController.clearSelection();
                    isManagerEnabled = false;
                    managerController.setOptions([]);
                  });
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}
14
likes
150
points
31
downloads

Publisher

verified publisherinnoventixsolutions.com

Weekly Downloads

A customizable Flutter widget for cascading, multi-select, dependent and searchable dropdowns with dynamic updates.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, material_color_utilities

More

Packages that depend on dependent_multiselect_search_dropdown