CODEWITHSUNDEEP
flutterdart
Youssef Had
Youssef Had

Reputation: 157

Adding some space between TableRows in Flutter

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,
        ),
      ])
    ],
);

Upvotes: 4

Views: 13361

Answers (4)

JAgüero
JAgüero

Reputation: 677

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'),
         ),
       ),
    ]   
  )
)

Upvotes: 1

Otobong Jerome
Otobong Jerome

Reputation: 496

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),
                  )
              ),
            ])

Upvotes: 1

Aman kumar
Aman kumar

Reputation: 399

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')
                            ]),
                   )

Upvotes: 9

Ross
Ross

Reputation: 2417

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:

EdgeInsets Class:

Upvotes: 5

Related Questions