CODEWITHSUNDEEP
flutterflutter-layout
Sarah
Sarah

Reputation: 1235

how do I add a circular border to table in flutter

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 ?

Upvotes: 3

Views: 9644

Answers (3)

Victor Gorban
Victor Gorban

Reputation: 1699

I came from WEB background, and I used to think that 'rounded' border automatically restrict its content that tries to overflow that border. If container is declared as rounded, then container's content is rounded too.

For some reason, DataTable.border doesn't work for me properly, it adds the border, but that border behaves like a top layer, and table content still have sharp corners, while I want the content to be rounded too.

My solution is to style TableRow first, before using DataTable.border: For top one (header row):

                      TableRow(
                          decoration: BoxDecoration(
                              color: ThemeColors.purpleTransparent,
                              borderRadius: BorderRadius.vertical(top: Radius.circular(8))),
                          children: [
                            TableCell(
    ...

For bottom one (last row):

                      TableRow(
                          decoration: BoxDecoration(
                              color: ThemeColors.purpleTransparent,
                              borderRadius: BorderRadius.vertical(bottom: Radius.circular(8))),
                          children: [
                            TableCell(
    ...

This solution correctly restricts the TableRow content to overflow border restriction.

Upvotes: 0

Vinamra Jaiswal
Vinamra Jaiswal

Reputation: 699

Update [2024]:

For someone still looking for the updated answer

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

Upvotes: 0

Sami Haddad
Sami Haddad

Reputation: 1436

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

Upvotes: 13

Related Questions