'Flutter display Datatable rows

I'm new to Flutter and I wanted to know how to display my data in a DataTable. Here's my DataTable

As you can see in the image the data that i retrieve gets displayed in one row and between square brackets, how can I "split" them in order to remove the brackets and display the data one below the other, so that in the first column I have the names of my containers and in the second column the specific quantity for that container in the row. Here's what I tried

  DataTable _createDataTable() {
    return DataTable(
        decoration: BoxDecoration(border: Border.all()),
        columns: _createColumns(),
        rows: _createRows());
  }

  List<DataColumn> _createColumns() {
    return const [
      DataColumn(label: Text('Conteneur')),
      DataColumn(label: Text('Quantitè')),
    ];
  }

  List<DataRow> _createRows() {
    List<DataRow> rows = [];

    for (int i = 0; i < lswContenitori!.length; i++) {
      for (int j = 0; j < lswContenitori!.length; j++) {
        rows.add(DataRow(
          cells: [
            DataCell(Text(lswContenitori![0][i].toString())),
            DataCell(Text(lswContenitori![0][j].toString()))
          ],
        ));
      }
    }

    return rows;
  }
             CustomButton(
            width: MediaQuery.of(context).size.width * 0.3,
            data: "Ajouter",
            onPressed: () async {
              //brings me to the page where I retrieve the data to populate the DataTable
              await Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => EditContenitore(
                            mQtaToSplit: "30",
                          ))).then((result) {
                setState(() {
                  lswContenitori!.add([result[0], result[1]]);
                  viewTab = true;
                });
              });
            },
          ),

And here's the code of the page where i retrieve the data for the DataTable

class EditContenitore extends StatefulWidget {
  EditContenitore({Key? key, this.mQtaToSplit}) : super(key: key);

  String? mQtaToSplit;

  @override
  State<EditContenitore> createState() => _EditContenitoreState();
}

class _EditContenitoreState extends State<EditContenitore> {
  late Future<List<ClsStampanti>> futureContenitore;
  late List<ClsStampanti> datiContenitore = [];
  ClsStampanti? dropdownValueCont;

  final _editKey = GlobalKey<FormState>();
  late FocusNode editFocusNode;

  TextEditingController controllerQtaCont = TextEditingController();
  int? qtaCont;
  int? mQtaToSplit;

  String? contenitore;
  String? qta;

  List<String> lswElenco = [];
  List<String> lswQtaElenco = [];

  @override
  void initState() {
    super.initState();
    mQtaToSplit = int.parse(widget.mQtaToSplit!);
    editFocusNode = FocusNode();
    futureContenitore = getContenitori();
    futureContenitore.then((value) {
      datiContenitore.addAll(value);
      dropdownValueCont = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _editKey,
        child: CustomContainer(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FutureBuilder(
                future: futureContenitore,
                builder: (BuildContext context,
                    AsyncSnapshot<List<ClsStampanti>> lCont) {
                  List<Widget> children;
                  if (lCont.hasData) {
                    children = <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Text("Bar Code"),
                          CustomTxt(
                            width: MediaQuery.of(context).size.width * 0.4,
                            autofocus: true,
                            maxLines: 1,
                            onEditingComplete: () => editFocusNode.nextFocus(),
                            textInputAction: TextInputAction.search,
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Text("Conteneur"),
                          //combo contenitori
                          Padding(
                            padding: const EdgeInsets.all(10),
                            child: SizedBox(
                              width: MediaQuery.of(context).size.width * 0.4,
                              child: ButtonTheme(
                                alignedDropdown: true,
                                child: Expanded(
                                  flex: 2,
                                  child: DropdownButtonFormField<ClsStampanti?>(
                                    value: dropdownValueCont,
                                    validator: validaCombo,
                                    isExpanded: true,
                                    icon: const Icon(Icons.arrow_drop_down),
                                    decoration: const InputDecoration(
                                      errorStyle: TextStyle(height: 0),
                                      contentPadding: EdgeInsets.all(10),
                                      border: OutlineInputBorder(),
                                    ),
                                    isDense: true,
                                    onChanged: (ClsStampanti? newValue) {
                                      setState(() {
                                        dropdownValueCont = newValue!;
                                      });
                                      editFocusNode.nextFocus();
                                    },
                                    items:
                                        datiContenitore.map((ClsStampanti val) {
                                      return DropdownMenuItem<ClsStampanti>(
                                        value: val,
                                        child: Text(val.idStampante),
                                      );
                                    }).toList(),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Text("Quantité"),
                          CustomTxt(
                            width: MediaQuery.of(context).size.width * 0.4,
                            maxLines: 1,
                            controller: controllerQtaCont,
                            focusNode: editFocusNode,
                            onSaved: (value) => controllerQtaCont.text = value!,
                          ),
                        ],
                      ),
                      Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            CustomButton(
                              onPressed: () {
                                if (_editKey.currentState!.validate()) {
                                  _editKey.currentState!.save();
                                  setState(() {
                                    addContenitore();
                                  });
                                }
                              },
                              data: 'OK',
                            ),
                           
                            CustomButton(
                              data: 'Quitter',
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            )
                          ]),
                    ];
                  } else {
                    children = const <Widget>[
                      SizedBox(
                        width: 60,
                        height: 60,
                        child: CircularProgressIndicator(),
                      ),
                    ];
                  }
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: children,
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  void addContenitore() {
    qtaCont = int.parse(controllerQtaCont.text);
    if (!isNumeric(controllerQtaCont.text)) {
      controllerQtaCont.text = "0";
      editFocusNode.requestFocus();
      return;
    }
    if (qtaCont! > mQtaToSplit!) {
      setState(() {
        controllerQtaCont.text = mQtaToSplit.toString();
        return;
      });
    } else if (mQtaToSplit != 0) {
      setState(() {
        mQtaToSplit = mQtaToSplit! - qtaCont!;
        lswElenco.add(dropdownValueCont!.idStampante);
        lswQtaElenco.add(controllerQtaCont.text);
        controllerQtaCont.clear();
      });
    } else if (mQtaToSplit == 0) {
      Navigator.pop(context, [lswElenco, lswQtaElenco]);
    }
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source