Flutter how to make table like UI

user_14081793 0
Viewed 308

I am new in flutter just want to know using which widget I can create UI like given in below image. I tried a Table but then my Textfields are so much oversized and not in a line with the text. Any Help? Thx!

 return Container(

      padding: EdgeInsets.all(20.0),

      child: Table(
       // border: TableBorder.all(color: non),
        children: [
          TableRow(

              children: [
            Text('Bizeps(l)'),
                SizedBox(
                  width: 20.0,

                  child: const Card(child: TextField()),
                ),

            Text('cm'),
            IconButton(icon: Icon(Icons.add_circle_outline)),
            IconButton(icon: Icon(Icons.remove_circle_outline)),

          ]),
          TableRow(children: [
            Text('Bizeps(l)'),
            SizedBox(
              width: 30.0,
              child: const Card(child: TextField()),
            ),

            Text('cm'),
            IconButton(icon: Icon(Icons.add_circle_outline)),
            IconButton(icon: Icon(Icons.remove_circle_outline)),
          ])
        ],
      ),);
    
  }

My Result:

img1

Goal:

img2

flutter-layout flutter user-interface
2 Answers

Combine Column with Rows to take your result.

 Widget rowWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Bizeps(l)'),
        TextField(),
        Text('cm'),
        IconButton(
          icon: Icon(Icons.add_circle_outline),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.remove_circle_outline),
          onPressed: () {},
        ),
      ],
    );
  }

  Widget columnWidget() {
    return Column(
      children: [
        rowWidget(),
        rowWidget(),
        rowWidget(),
      ],
    );
  }
user_124857570

You can set defaultVerticalAlignment: TableCellVerticalAlignment.middle for the table to align the text in line with the buttons. To reduce the TextField size you can set its height as well as its width. Keep in mind that in the Goal picture there is no Card wrapping the TextFields.

Container(
        padding: EdgeInsets.all(20.0),
        child: Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.middle, // this is new
          children: [
            TableRow(children: [
              Text(
                'Bizeps(l)',
              ),
              SizedBox(
                width: 20.0,
                height: 50.0, // this is new
                child: const Card(child: TextField()),
              ),
              Text('cm'),
              IconButton(icon: Icon(Icons.add_circle_outline)),
              IconButton(icon: Icon(Icons.remove_circle_outline)),
            ]),
            TableRow(children: [
              Text('Bizeps(l)'),
              SizedBox(
                width: 20.0,
                height: 50.0, // this is new
                child: const Card(child: TextField()),
              ),
              Text('cm'),
              IconButton(icon: Icon(Icons.add_circle_outline)),
              IconButton(icon: Icon(Icons.remove_circle_outline)),
            ])
          ],
        ),
      ),
user_99027650
Related