creating table like structure with retrievable value in flutter

Question

I am creating an app that contains a table structured view, in this view the user select a value from a drop down corresponds with the row content

I am using a map to manipulate the row content,

var data = {
  'CT': {
    's1': {
      1001: 3,
      1002: 6,
      1003: 3,
      1004: 3,
      1008: 4,
      1009: 2,
    },
  }
};

The table format should be like this (It is Hard coded for demo)

and also when a button pressed i need all data in the table. code, credit and also the the selected dropDownItem(String) for a calculation. The DropDown is same for all rows but i want to know the selecteditem for which code and credit

I tried with DataTable

but don't know how to manipulate the Row with map also don't know how to retrieve(get) the data in the table for calculation

Answer 1

We need to create some lists to store the needed data(code, gradepoints, and the default values of dropdown)

so:

class _ViewScreenState extends State<ViewScreen> {
  List? selectedValues = []; // for storing the dropdown data
  List? creditsDetails = []; // for gradePoint
  List? codeDetais = []; // for code 

  @override
  void initState() {
    super.initState();
    creditsDetails = getPtsCodeDetails('CT', 's1')[0];
    codeDetais = getPtsCodeDetails('CT', 's1')[1];
    selectedValues = setSelectedValues(creditsDetails!.length); // creditDetails's  number of default value in a list
  }

the getPtsCodeDetails would be like this for changing the data from map to list

List getPtsCodeDetails(String? dp, String? sem) {
  var ptscode = [];
  ptscode.add(data[dp]![sem]!.values.toList());
  ptscode.add(data[dp]![sem]!.keys.toList());
  return ptscode;
}

and We are using the ListView.builder for the table(Didn't check with DataTable yet) We are basically using the selectedValues for DropDowns items and changing the value of the selected Dropdown's index's value in setState((){};) so the change will reflect on ui also

child: ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: creditsDetails!.length,
                itemBuilder: (context, index) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        codeDetais![index].toString(),
                        textAlign: TextAlign.right,
                      ),
                      Text(creditsDetails![index].toString()),
                      DropdownButton<String>(
                        value: selectedValues![index],
                        onChanged: (String? value) {
                          setState(() {
                            selectedValues![index] = value;
                          });
                        },
                        items: grades.map((String value) {
                          return DropdownMenuItem<String>(
                            alignment: Alignment.center,
                            value: value,
                            child: Text(
                              value,
                              textAlign: TextAlign.center,
                            ),
                          );
                        }).toList(),
                      ),
                    ],
                  );
                },
              ),

If you have any better solution let me know

Thanks