Adding padding to TableRow

Question

I'm trying to add padding to my table rows.

This is what I have:

var list = (report['items'] as List)
          .map((item) => 
          TableRow(children: [
                Text(item['place']),
                Text(item['type']),
                Text(item['producer']),
                Text(item['serial_number']),
                Text(formatter.format(DateTime.parse(item['next_check_date']))
                    .toString()),
                Text(item['test_result']),
                Text(item['comments']),
              ]))
          .toList();

This is what I tried to do:

var list = (report['items'] as List)
          .map((item) =>
      Container(
          padding: EdgeInsets.only(10.0),
          child: TableRow(children: [
                Text(item['place']),
                Text(item['type']),
                Text(item['producer']),
                Text(item['serial_number']),
                Text(formatter.format(DateTime.parse(item['next_check_date']))
                    .toString()),
                Text(item['test_result']),
                Text(item['comments']),
              ])))
          .toList();

But I get this error ( after adding the Container with the padding):

The argument type 'TableRow' can't be assigned to the parameter type 'Widget'.

How I can add padding to my Table / TableRows?

Answer 1

What I found working in this case (when you want to add padding between rows in a table) is to wrap Text Widget with Container and add padding property to one of your elements (that is potentially the 'tallest' one) and use alignment property for other containers where you need to align text within the row. My example will look like the following (sorry for the image being blurry):

Padding(
  padding: const EdgeInsets.fromLTRB(32.0, 0.0, 32.0, 0.0),
  child: Table(
    columnWidths: {
      0: FractionColumnWidth(.75),
    },
    children: achievementList
        .map(
          (achivement) => TableRow(
            children: [
              Container(
                padding: EdgeInsets.only(bottom: 10.0),
                child: Text(
                  achivement.title,
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
              ),
              Container(
                alignment: Alignment.centerRight,
                child: Text(
                  achivement.dateString,
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
              ),
            ],
          ),
        )
        .toList(),
  ),
),

where achievementList is my object with title and dateString. By first wrapping the Text Widget with Container and giving that first Container property padding: EgeInsets.only(bottom: 10.0), it gives padding to the whole row.

Answer 2

• Adding Space Between TableRow

    final attachmentWidget = Container(
    height: 200,
    width: width,
    decoration: BoxDecoration(
        color: Palette.white,
        borderRadius: BorderRadius.all(Radius.circular(30))),
    child: Center(
      child: Table(
        children: [
          TableRow(
            children: [
              iconColumn(
                  color: Colors.deepPurple,
                  icon: Icons.camera_alt,
                  name: 'Camera',
                  tap: null),
              iconColumn(
                  color: Palette.defaultColor,
                  icon: Icons.photo,
                  name: 'Camera Gallery',
                  tap: null),
              iconColumn(
                  color: Palette.defaultColor,
                  icon: Icons.videocam,
                  name: 'Video',
                  tap: null),
              iconColumn(
                  color: Palette.defaultColor,
                  icon: Icons.photo,
                  name: 'Video Gallery',
                  tap: null),
            ]
          ),
          TableRow(
            children: [
              VerticalSpacing(height: 15),//SizeBox Widget
              VerticalSpacing(height: 15),
              VerticalSpacing(height: 15),
              VerticalSpacing(height: 0),
            ]
          ),
          TableRow(
            children: [
              iconColumn(
                  color: Palette.mediumBlue,
                  icon: Icons.insert_drive_file,
                  name: 'Document',
                  tap: null),
              iconColumn(
                  color: Palette.chatGreen,
                  icon: Icons.audiotrack,
                  name: 'Audio',
                  tap: null),
              iconColumn(
                  color: Palette.chatGreen,
                  icon: Icons.location_on,
                  name: 'Location',
                  tap: null),
              VerticalSpacing(height: 0),
            ]
          )
        ],
      ),
    )
    );