Problem getting Flutter DataTable border radius on table borders

Viewed 152

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?

0 Answers
Related