Problem getting Flutter DataTable border radius on table borders

Question

I have a DataTable that I want to add a border radius to. After reading up on this, I added the DataTable to a Container widget. It works great when I do not add a background color to my headings. When doing this, the entire table's color is changed.

Container(
    decoration: BoxDecoration(
        border: Border.all(
        width: 1,
        color: Colors.grey,
    ),
    color: Palette.blueToLight.shade700,
    borderRadius: const BorderRadius.all(
        Radius.circular(15),
    ),
),
child: DataTable(
    border: TableBorder.symmetric(
        inside: const BorderSide(
            width: 1,
            color: Colors.grey,
        ),
    ),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
        Radius.circular(15),
        ),
    ),
    columns: const <DataColumn>[
    ... ],
...

As a workaround, I then change the background color of the DataRow.

rows: data
    .map<DataRow>(
        (element) => DataRow(
            color: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
                return Colors.white;
            }
        ),
        cells: [ ... ]
...

The issue I now have is that the bottom corners of the table now has a combination of rounded borders and an overflow of a rectangular shaped white block.

Does anyone have a fix or workaround for this?

score 0 · Answer 1 · answered Jun 07 '23 at 13:22

so here is the catch flutter draws the border-radius based on isUnifrom method from TableBorder just extend it and add your own implementation to it and it works! here is an example

 
    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;
      }
    }

Problem getting Flutter DataTable border radius on table borders

1 Answers1

Linked