CODEWITHSUNDEEP
flutter
Nabin Dhakal
Nabin Dhakal

Reputation: 2202

Leave equal spacing between items of row in flutter

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 enter image description here

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

Answers (1)

timilehinjegede
timilehinjegede

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:

  1. Add the code snippet below as a variable so as to give the table row spaces
// 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,
    ),
  ]);
  1. Include this in your widget tree to see the 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:

img

Upvotes: 2

Related Questions