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

Answer 3

You could wrap your table with Padding widget like this:

Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Table(
                    children: [
                      TableRow(
                        children: [
                          Text('1'),
                          Text('2'),
                          Text('3'),
                        ],
                      ),
                    ],
                  ),
                ),

Answer 4

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

Answer 5

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

Answer 6

The type for Table children is List<TableRow> meaning the elements in the list must have the TableRow as the immediate widget, you can then add any widget inside the TableRow widget.

In your case:

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

Answer 7

use sized box

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