How to style a data table in flutter?

Question

I was wondering if you could make something like this that I designed using the DataTable widget in flutter?

https://i.stack.imgur.com/SaHBj.png

Solution

To achieve this you can have to use Container and Table below.

1. In the below code I just cover the table with the Container widget and give the decoration property to have the radius over the border of the table.
2. Then just set the table border for inside only so it won't display the outer border which is already covered by the container.
3. And finally set the decoration property of the first TableRow(Header) widget.

You can access the sample code from here too.

Container(
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1,
                ),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Table(
                // border: TableBorder.all(
                //     color: Colors.black, width: 1.0, style: BorderStyle.solid),
                border: TableBorder.symmetric(
                    inside: BorderSide(width: 2, color: Colors.black)),
                defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                columnWidths: {
                  0: FlexColumnWidth(4),
                  1: FlexColumnWidth(1),
                },
                children: [
                  TableRow(
                      decoration: BoxDecoration(
                        color: Colors.blue[100],
                        border: Border.all(
                          width: 1,
                        ),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            topRight: Radius.circular(10)),
                      ),
                      children: [
                    Text("Bowler", textScaleFactor: 1),
                    Text(
                      "OVR",
                      textScaleFactor: 1,
                      textAlign: TextAlign.center,
                    ),
                  ]),
                  TableRow(children: [
                    Text(score.bowler.name, textScaleFactor: 1),
                    Text(
                      score.bowler.overs.toString(),
                      textScaleFactor: 1,
                      textAlign: TextAlign.center,
                    ),
                  ]),
                ],
              ),
            );

Comments

[Kiran Maniya]

What did you try so far?

[Jack Maring]

I actually just made a copy of the DataTable widget into a new file and I've been styling it manually from there.

[Ahmed Sunny]

share what you have done, css, etc