how to display dropdown data based on dropdown number selection

Question

I have a case where I have a dropdown where this dropdown value is created manually. Because the back end is made manually

Then what I want is, for example, when I select number 1 it displays data A, or I select number 2 it displays data B and so on.

What I want to ask is how do I get the data from the API based on the selected dropdown value.

This is the dropdown view and also the code

final List<String> list = <String>['1', '3', '5', '7'];

and when I select value from dropdown it displays data from API based on dropdown selection as below

"data": {
        "1": {
            "id": "f732bbb0-a34a-474d-8829-23aa66470e22",
            "id_dosen": "d6aedfb6-cf88-4e89-8365-0f206822a6c4",
            "id_mk": "cb0bced5-a02d-4f46-bd88-6ed61daece10",
            "nidn": null,
            "dosen": "Yudhy",
            "id_kelas_kuliah": "52deb32d-292f-44b9-af69-a90dfc5fbc81",
            "kelas_kuliah": "Pendidikan agama islam III - Sistem Informasi - A",
            "prodi": "Sistem Informasi",
            "kelas": "KARYAWAN",
            "semester": "5",
            "kelompok_kelas": "A",
            "kode": null,
            "sks": 2,
            "jumlah_kelas": 0,
            "matakuliah": "Pendidikan agama islam III ( Islamic Religious Education III ) - A",
            "smt": "2022-2023 GANJIL",
            "bobot_sks": 2,
            "rencana_pertemuan": 14,
            "jenis_evaluasi": "KOGNITIF/PENGETAHUAN",
            "created_at": "2022-09-09 08:14:14",
            "updated_at": "2022-09-09 08:14:14",
            "created_by": "Fahmi Nugraha",
            "updated_by": "Fahmi Nugraha"
        } ...

What I want to ask is how do I make it.

Can your include your current snippet that you've tried so far? — Md. Yeasin Sheikh
– Md. Yeasin Sheikh, Commented Nov 11, 2022 at 5:35
I'm still figuring out how I can call the above API data based on the dropdown options. — sharon
– sharon, Commented Nov 11, 2022 at 6:49

Md. Yeasin Sheikh · Accepted Answer · 2022-11-11 05:46:43Z

1

The main concept is making dropdown button value nullable and set the sub-category to null when we will change the parent DropdownButton value.

DropdownButton(
  value: mainValue,
  items: list
      .map(
        (e) => DropdownMenuItem<String?>(
          value: e,
          child: Text(e),
        ),
      )
      .toList(),
  onChanged: (value) {
    subValue = null;
    mainValue = value;
    setState(() {});
  },
),
DropdownButton(
  value: subValue,
  items: data[mainValue]
          ?.map(
            (e) => DropdownMenuItem<String?>(
              value: e,
              child: Text(e),
            ),
          )
          .toList() ??
      [],
  onChanged: (value) {
    subValue = value.toString();
    setState(() {});
  },
),

Play with this widget

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

  @override
  State<TGA> createState() => _TGAState();
}

class _TGAState extends State<TGA> {
  final List<String> list = <String>['1', '3'];

  final data = {
    '1': ["1A", "1B", "1C"],
    '3': ["3A", "3B", "3C"],
  };

  String? mainValue;
  String? subValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          DropdownButton(
            value: mainValue,
            items: list
                .map(
                  (e) => DropdownMenuItem<String?>(
                    value: e,
                    child: Text(e),
                  ),
                )
                .toList(),
            onChanged: (value) {
              subValue = null;
              mainValue = value;
              setState(() {});
            },
          ),
          DropdownButton(
            value: subValue,
            items: data[mainValue]
                    ?.map(
                      (e) => DropdownMenuItem<String?>(
                        value: e,
                        child: Text(e),
                      ),
                    )
                    .toList() ??
                [],
            onChanged: (value) {
              subValue = value.toString();
              setState(() {});
            },
          ),
        ],
      ),
    );
  }
}

answered Nov 11, 2022 at 5:46

Md. Yeasin Sheikh

64.8k7 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sharon Over a year ago

how can i replace final data = { '1': ["1A", "1B", "1C"], '3': ["3A", "3B", "3C"], }; with existing data in the API?

Md. Yeasin Sheikh Over a year ago

call your api , can be used FutureBuilder to receive data then use the data on DropDownMenuButton, More about networking/fetch-data

Collectives™ on Stack Overflow

how to display dropdown data based on dropdown number selection

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related