In Flutter, I am trying to make a dependent dropdown with the following json

Question

In Flutter, I am trying to make a dependent dropdown with the following json.

I Want the Dropdown to be in this format

First, Independent Dropdown

dataNames

Second, Dependent Dropdown

indexes of the dataSets' children

Third, Dependent Dropdown

select the children of the above drop-down (...hello 1, hello 2... )

[
  {
    "dataName": "data1",
    "dataSets": [
      ["hello 1", "hello 2", "hello 3"],
      ["hi 1", "hi 2", "hi 3", "hi 4"]
    ]
  },
  {
    "dataName": "data2",
    "dataSets": [
      ["2nd 1", "2nd 2", "2nd 3"],
      ["let 1", "let 2", "let 3", "let 4"]
    ]
  }
]

Answer 1

Here is the first step: parsing the json into a class model and then creating a list of models. second step build the DropdownMenuItem list to be consumed by the DropDownbutton. Create a _currentResultClass variable the first dropdownbutton (level1) selection. Step 3: filter on level 1 dataName and find the model then populate dropdownmenuitems based on a filter by that dataname.

class ResultClass
{
    String?dataName;
    //List<List<String>> dataSets= new List.generate(n, (i) => []);
    List<List<String>>? dataSets= [];
    ResultClass({this.dataName,this.dataSets});

    ResultClass.fromJson(Map<String, dynamic> json) {
    dataName = json['dataName'];
    dataSets = json['dataSets'];
    }
    Map<String,dynamic> toJson(){
      final Map<String,dynamic>data = new Map<String,dynamic>();
      data['dataName']=this.dataName;
      data['dataSet']=this.dataSets;
      return data;
    }
}

class TestDropDown extends StatefulWidget {
  TestDropDown({Key? key}) : super(key: key);

  @override
  State<TestDropDown> createState() => _TestDropDownState();
}
class _TestDropDownState extends State<TestDropDown> {
      ResultClass ? _currentResultClassLevel1;
      String ? _currentStringLevel2;
      List<ResultClass> lst=[];
      List<DropdownMenuItem<ResultClass>>? itemsLevel1;

  var data=[
  {
    "dataName": "data1",
    "dataSets": [
      ["hello 1", "hello 2", "hello 3"],
      ["hi 1", "hi 2", "hi 3", "hi 4"]
    ]
  },
  {
    "dataName": "data2",
    "dataSets": [
      ["2nd 1", "2nd 2", "2nd 3"],
      ["let 1", "let 2", "let 3", "let 4"]
    ]
  }
];

@override
  void initState() {
    // TODO: implement initState
    super.initState();
  for(var i=0; i<data.length; i++)
  {
    ResultClass model = ResultClass.fromJson(data[i]);
    lst.add(model);
    if (i==0)
    {
      _currentResultClassLevel1=model;
    }

  }

  itemsLevel1 = lst
              .map((item) => DropdownMenuItem<ResultClass>(
                  child: Text(item.dataName??""), value: item))
              .toList();

}

  @override
  Widget build(BuildContext context) {
  
   List<ResultClass> models = lst.where((item)=> item.dataName==_currentResultClassLevel1?.dataName).toList();

    List<String> strings=[];
    models.forEach((model)=>
      model.dataSets?[0].forEach((element)=>strings.add(element)));
    
    var itemsLevel2= strings.map((item) => DropdownMenuItem<String>(
                  child: Text(item), value: item))
             .toList();
   
    return Scaffold(appBar: AppBar(title: Text("Dropdown"),),body:
    Column(children: [
       DropdownButton<ResultClass>(items: itemsLevel1,
       value: this._currentResultClassLevel1,
       onChanged: (item){
         setState(() {
         _currentResultClassLevel1=item;
         });
         },),

         DropdownButton<String>(items: itemsLevel2,
       value: this._currentStringLevel2,
       onChanged: (item){
         setState((){
          _currentStringLevel2=item;
         });
         
         },),

        SizedBox(height:50)
    ],)
    );
  }
}