'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 |
|---|
