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.sstatic.net/SaHBj.png

Answer 1

so the issue with border-radius is that it has to be drawn only when all borders match even the inside and outside should match it depends on isUniform method from the TableBorder class

here I mention a workaround for that

workaround to create a custom table border and override the isUniform method :

 
    class CustomTableBorder extends TableBorder {
      const CustomTableBorder({
        BorderSide top = BorderSide.none,
        BorderSide right = BorderSide.none,
        BorderSide bottom = BorderSide.none,
        BorderSide left = BorderSide.none,
        BorderSide horizontalInside = BorderSide.none,
        BorderSide verticalInside = BorderSide.none,
        BorderRadius borderRadius = BorderRadius.zero,
      }) : super(
              top: top,
              right: right,
              bottom: bottom,
              left: left,
              horizontalInside: horizontalInside,
              verticalInside: verticalInside,
              borderRadius: borderRadius,
            );
      factory CustomTableBorder.symmetric({
        BorderSide? inside,
        BorderSide outside = BorderSide.none,
        BorderRadius borderRadius = BorderRadius.zero,
        BorderSide? horizontalInside,
        BorderSide? verticalInside,
      }) {
        return CustomTableBorder(
          top: outside,
          right: outside,
          bottom: outside,
          left: outside,
          horizontalInside: inside ?? horizontalInside ?? BorderSide.none,
          verticalInside: inside ?? verticalInside ?? BorderSide.none,
          borderRadius: borderRadius,
        );
      }
      bool get isUniform {
        final Color topColor = top.color;
        if (right.color != topColor ||
            bottom.color != topColor ||
            left.color != topColor) {
          return false;
        }
    
        final double topWidth = top.width;
        if (right.width != topWidth ||
            bottom.width != topWidth ||
            left.width != topWidth) {
          return false;
        }
    
        final BorderStyle topStyle = top.style;
        if (right.style != topStyle ||
            bottom.style != topStyle ||
            left.style != topStyle) {
          return false;
        }
    
        return true;
      }
    }

Answer 2

You can wrap with ClipRRect for corner radius like other widgets.

ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10)),
   child: Table(),
),

Answer 3

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