how do I add a circular border to table in flutter

Question

I am new to table widget and I read the documentation but I couldn't find a way to make the table border slightly curved , so is there something I am missing ?

Sami Haddad · Accepted Answer · 2020-06-14T11:50:25.467

13

Wrap your table with a container and remove table border if any:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      width: 1,
    ),
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
)

If you need to display the inner borders:

Table(
  border: TableBorder.symmetric(
    inside: BorderSide(width: 1),
  ),
)

edited Jun 14 '20 at 11:50

answered Jun 14 '20 at 09:39

Sami Haddad

1,356
10
15

thanks , but I need a separator between each cell and column not only outline border – Sarah Jun 14 '20 at 11:36
You can still use the inner border, I'll update the answer for this. – Sami Haddad Jun 14 '20 at 11:48
How do I add additional padding for top and bottom on dynamic content? The rounded corners cut into cells – Anton Duzenko Jan 05 '21 at 10:34
@AntonDuzenko you can use the `padding` property in the `Container`. – Sami Haddad Jan 07 '21 at 14:10

score 0 · Answer 2 · answered Nov 25 '22 at 16:08

0

Update 2022 For someone still looking for the answer

DataTable(
        border: TableBorder(borderRadius: BorderRadius.circular(20)),
        . . .

answered Nov 25 '22 at 16:08

Vinamra Jaiswal

603
7
15

how do I add a circular border to table in flutter

2 Answers2