\n
Header widget
\nreturn Container(\n margin: EdgeInsets.only(top: 20),\n width: MediaQuery.of(context).size.width,\n height: 50,\n decoration: BoxDecoration(\n border: Border(\n bottom: BorderSide(\n width: 5.0,\n color: Color.fromRGBO(232, 232, 232, 1),\n )),\n color: Colors.grey),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n crossAxisAlignment: CrossAxisAlignment.center,\n children: <Widget>[\n Spacer(),\n Text("S.N"),\n Spacer(),\n Text("Food Name"),\n Spacer(),\n Text("Price"),\n Spacer(),\n Text("Qty"),\n Spacer(),\n Text("Action"),\n Spacer(),\n ]),\n);\n
\nListItems
\nreturn Container(\n width: MediaQuery.of(context).size.width,\n decoration: BoxDecoration(\n border:\n Border(bottom: BorderSide(width: 5.0, color: Colors.grey[300])),\n color: Colors.white,\n ),\n child: Wrap(\n children: <Widget>[\n Row(\n mainAxisSize: MainAxisSize.max,\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n crossAxisAlignment: CrossAxisAlignment.center,\n children: <Widget>[\n Container(child: Flexible(child: Text((i + 1).toString()))),\n Container(\n child: Flexible(\n child: Text(\n removeAllHtmlTags(menuList[i].name),\n softWrap: true,\n )),\n ),\n Container(\n child: Flexible(\n child: Text(\n removeAllHtmlTags(menuList[i].discountPrice.toString()),\n ),\n ),\n ),\n Container(\n child: Flexible(\n child: Text(\n menuList[i].maxQty.toString(),\n ),\n ),\n ),\n Container(\n width: 100,\n child: menuList[i].status == 0\n ? Text(\n menuList[i].foodStatus,\n style: TextStyle(color: Colors.red),\n )\n : YourListViewItem(\n id: menuList[i].id,\n index: menuList[i].status,\n ),\n ),\n ],\n )\n ],\n ));\n
\nYourListViewItem widget
\nreturn ListTile(\n trailing: new Switch(\n value: isSwitched,\n activeColor: Colors.green,\n activeTrackColor: Colors.green,\n inactiveThumbColor: Colors.white,\n inactiveTrackColor: Colors.grey,\n onChanged: (value) {\n setState(() {\n if (isSwitched) {\n isSwitched = false;\n isSwitched = value;\n changeFoodStatus(widget.id);\n } else {\n isSwitched = true;\n isSwitched = value;\n changeFoodStatus(widget.id);\n }\n });\n },\n ),\n );\n
\n","author":{"@type":"Person","name":"Nabin Dhakal"},"upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"You can use the Table
widget instead, it saves you the stress of nesting Columns
and Rows
and also giving fixed sizes to your widgets to fit devices screens.
Read more about the Table
widget here: Table Class
I have added a demo using your widget tree as an example:
\n// add this as a variable to gives the table rows spacing \nfinal TableRow rowSpacer = TableRow(children: [\n SizedBox(\n height: 15,\n ),\n SizedBox(\n height: 15,\n ),\n SizedBox(\n height: 15,\n ),\n SizedBox(\n height: 15,\n ),\n SizedBox(\n height: 15,\n ),\n ]);\n
\nTable
widget in action// add this in your widget tree\n Table(\n // give each column in the table a fraction (to adapt to various screen sizes)\n columnWidths: {\n 0: FractionColumnWidth(.1),\n 1: FractionColumnWidth(.4),\n 2: FractionColumnWidth(.2),\n 3: FractionColumnWidth(.15),\n 4: FractionColumnWidth(.2)\n },\n children: [\n // first table row\n TableRow(\n children: [\n Text('S.N'),\n Text('Food Name'),\n Text('Price'),\n Text('Qty'),\n Text('Action'),\n ],\n ),\n // space each row\n rowSpacer,\n // first table row\n TableRow(\n children: [\n Text('1'),\n Text('Burger'),\n Text('180'),\n Text('10'),\n SizedBox(\n height: 20,\n child: Switch(\n value: true,\n onChanged: (val) {},\n ),\n ),\n ],\n ),\n\n // space each row\n rowSpacer,\n // third table row\n TableRow(\n children: [\n Text('2'),\n Text('Chilli Momo'),\n Text('140'),\n Text('5'),\n SizedBox(\n height: 20,\n child: Switch(\n value: true,\n onChanged: (val) {},\n ),\n ),\n ],\n ),\n\n // .... // add other rows here\n ],\n ),\n
\nOUTPUT:
\n\n","author":{"@type":"Person","name":"timilehinjegede"},"upvoteCount":2}}}Reputation: 2202
I have texts and a switch in a row, the data are good but the layout is not good. I tried mainAxisAlignement.spaceAround, or mainAxisAlignement.spaceBetween or mainAxisAlignement.spaceEvenly but the list of items are not aligned zigzag due to the size of text . I have implemented as follows
Header widget
return Container(
margin: EdgeInsets.only(top: 20),
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5.0,
color: Color.fromRGBO(232, 232, 232, 1),
)),
color: Colors.grey),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Spacer(),
Text("S.N"),
Spacer(),
Text("Food Name"),
Spacer(),
Text("Price"),
Spacer(),
Text("Qty"),
Spacer(),
Text("Action"),
Spacer(),
]),
);
ListItems
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border:
Border(bottom: BorderSide(width: 5.0, color: Colors.grey[300])),
color: Colors.white,
),
child: Wrap(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(child: Flexible(child: Text((i + 1).toString()))),
Container(
child: Flexible(
child: Text(
removeAllHtmlTags(menuList[i].name),
softWrap: true,
)),
),
Container(
child: Flexible(
child: Text(
removeAllHtmlTags(menuList[i].discountPrice.toString()),
),
),
),
Container(
child: Flexible(
child: Text(
menuList[i].maxQty.toString(),
),
),
),
Container(
width: 100,
child: menuList[i].status == 0
? Text(
menuList[i].foodStatus,
style: TextStyle(color: Colors.red),
)
: YourListViewItem(
id: menuList[i].id,
index: menuList[i].status,
),
),
],
)
],
));
YourListViewItem widget
return ListTile(
trailing: new Switch(
value: isSwitched,
activeColor: Colors.green,
activeTrackColor: Colors.green,
inactiveThumbColor: Colors.white,
inactiveTrackColor: Colors.grey,
onChanged: (value) {
setState(() {
if (isSwitched) {
isSwitched = false;
isSwitched = value;
changeFoodStatus(widget.id);
} else {
isSwitched = true;
isSwitched = value;
changeFoodStatus(widget.id);
}
});
},
),
);
Upvotes: 1
Views: 3274
Reputation: 14053
You can use the Table
widget instead, it saves you the stress of nesting Columns
and Rows
and also giving fixed sizes to your widgets to fit devices screens.
Read more about the Table
widget here: Table Class
I have added a demo using your widget tree as an example:
// add this as a variable to gives the table rows spacing
final TableRow rowSpacer = TableRow(children: [
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
]);
Table
widget in action// add this in your widget tree
Table(
// give each column in the table a fraction (to adapt to various screen sizes)
columnWidths: {
0: FractionColumnWidth(.1),
1: FractionColumnWidth(.4),
2: FractionColumnWidth(.2),
3: FractionColumnWidth(.15),
4: FractionColumnWidth(.2)
},
children: [
// first table row
TableRow(
children: [
Text('S.N'),
Text('Food Name'),
Text('Price'),
Text('Qty'),
Text('Action'),
],
),
// space each row
rowSpacer,
// first table row
TableRow(
children: [
Text('1'),
Text('Burger'),
Text('180'),
Text('10'),
SizedBox(
height: 20,
child: Switch(
value: true,
onChanged: (val) {},
),
),
],
),
// space each row
rowSpacer,
// third table row
TableRow(
children: [
Text('2'),
Text('Chilli Momo'),
Text('140'),
Text('5'),
SizedBox(
height: 20,
child: Switch(
value: true,
onChanged: (val) {},
),
),
],
),
// .... // add other rows here
],
),
OUTPUT:
Upvotes: 2