Adding padding to TableRow

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?

Solution 1: ahmed mahmoud

because TableRow isn't type of Widget. you can use this

Container(
  padding: EdgeInsets.symmetric(horizontal: 10.0),
  child: Table(
    children: (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()
  ),
);

Solution 2: Eradicatore

The best way I found so far (only way really) was to add a placeholder container of some height. That forces the row to be at least that tall. Then you may want to set the relative size of that column to something small.

  TableRow _buildRow(int index) {
    return TableRow(children: [
      Center(child: Icon(Icons.check_box_outline_blank), ),
      AutoSizeText("Info A", textAlign: TextAlign.center,maxLines: 1,maxFontSize: 20,),
      AutoSizeText("Info B", textAlign: TextAlign.center,maxLines: 1,maxFontSize: 20,),
      CustomTextField(
        controller: _nameController[index],
        keyboardType: TextInputType.text,
        autoFocus: false,
        icon: Icon(Icons.lightbulb_outline),
        hint: "Name",
      ),
      Container(
        height: 40,
        child: RaisedButton(
          onPressed: _pressMe,
          color: Colors.blue,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0))),
          child: AutoSizeText("Press Me",
              maxLines: 1,
              style: TextStyle(fontSize: 20.0, color: Colors.white)),
        ),
      ),
      Container(height: 70,),  // This is the line that helps me!!
    ]);
  }

Here are the parameters to add to your final Table widget to make this "fake" column very small (see column index 5)

 defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          columnWidths: {0: FractionColumnWidth(.05),
            1: FractionColumnWidth(.125),
            2: FractionColumnWidth(.125),
            3: FractionColumnWidth(.4),
            4: FractionColumnWidth(.2),
            5: FractionColumnWidth(.02)},

Solution 3: BIS Tech

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

Solution 4: kovalyovi

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.

Solution 5: Chatura Dilan

use sized box

TableRow(children: [
                  SizedBox(
                    height: 50.0,
                  ),
                  Icon(FontAwesomeIcons.check,
                      size: 16, color: Colors.green),
                  Text('Testing'),
                ]),