Adding some space between TableRows in Flutter

Question

i'm creating a table in Flutter which contains some TableRows, i just want to add some space between these rows.

Table(
    columnWidths: {0: FractionColumnWidth(.4)},
    children:[
        TableRow(children: [
        Text(
          'Original Title',
        ),
        Text(
          original_title,
        ),
      ]),
      TableRow(children: [
        Text(
          'Original Language',
        ),
        Text(
          original_language,
        ),
      ])
    ],
);

Aman kumar · Accepted Answer · 2020-07-18 06:45:43Z

Here's how i did it.

Create a constant, lets say rowSpacer as

const rowSpacer=TableRow(
                  children: [
                      SizedBox(
                      height: 8,
                      ),
                      SizedBox(
                      height: 8,
                      )
                ]);

Remember the number of SizedBox widgets to add above should be same as the number of colums in your table. For this case I have 2 colums, hence 2 SizedBoxes.

Now use this constant to give spacing between rows.

              Table(
                  children: [
                       TableRow(
                          children: [
                            Text('Name:'),
                            Text('Aman kumar')
                            ]),
                       rowSpacer,                        //Using the Constant
                       TableRow(
                           children: [
                             Text('Date of Birth:'),
                             Text('September 27, 1998')
                            ]),
                   )

Ross · Accepted Answer · 2019-08-19 06:38:32Z

5

Probably not the most efficient way but you can wrap the TableRow in a Padding Class

Padding(
  padding: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)

Something along the lines of:

Table(
  columnWidths: {0: FractionColumnWidth(.4)},
  children:[
    TableRow(children: [
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        'Original Title',
      )),
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        original_title,
      )),
    ]),
    TableRow(children: [
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        'Original Language',
      )),
      Padding(
      padding: EdgeInsets.symmetric(vertical: 8.0)
      child: Text(
        original_language,
      )),
    ]),
  ],
);

Padding Class:

https://api.flutter.dev/flutter/widgets/Padding-class.html

EdgeInsets Class:

https://api.flutter.dev/flutter/painting/EdgeInsets-class.html

edited Aug 19, 2019 at 6:38

answered Aug 16, 2019 at 14:46

Ross

2,4777 gold badges50 silver badges113 bronze badges

3 Comments

Youssef Had Over a year ago

sorry not working it gives this "The element type 'Padding' can't be assigned to the list type 'TableRow'."

Ross Over a year ago

@YoussefHad could you try to add the padding around the text, see my edit. I'm not at my home computer so cannot check if it work.

thecloud_of_unknowing Over a year ago

This adds padding around the content IN a row, and not space BETWEEN rows. Thus if your cell has a background colour, this approach won't work.

Otobong Jerome · Accepted Answer · 2020-11-14 03:42:08Z

1

The easiest thing you can do is to wrap the content of each table cell with a Padding like so:

    TableRow   (children: [
              TableCell(
                child:Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(EMAIL,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,


                  ),),
                ),
              ),
              TableCell(
                  child:Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(authUser.email),
                  )
              ),
            ])

answered Nov 14, 2020 at 3:42

Otobong Jerome

5167 silver badges5 bronze badges

Comments

JAgüero · Accepted Answer · 2023-09-13 03:57:40Z

1

I just wrapped one of the elements with a SizedBox and set the defaultVerticalAlignment of the Table to middle:

Table(
  defaultVerticalAlignment: TableCellVerticalAlignment.middle,
  TableRow(
    children: [
      TableCell(
        SizedBox(
          height: 50,
          child: Text('Hello world'),
         ),
       ),
    ]   
  )
)

answered Sep 13, 2023 at 3:57

JAgüero

7163 gold badges11 silver badges23 bronze badges

Comments

Paul Weibert · Accepted Answer · 2025-02-26 17:27:27Z

0

In addition to the answer of Ross:

Create a pad function for convenience, thus the padding can be adjusted for all cells at once:

Widget pad(Widget w) {
    return Padding(padding: EdgeInsets.symmetric(vertical: 8), child: w);
  }

Then use like this:

Table(
  columnWidths: {0: FractionColumnWidth(.4)},
  children:[
    TableRow(children: [
     pad(Text(
        'Original Title',
      )),
     pad(Text(
        original_title,
      )),
    ...

answered Feb 26 at 17:27

Paul Weibert

3542 silver badges6 bronze badges

Collectives™ on Stack Overflow

Adding some space between TableRows in Flutter

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related