2

I was wondering if you could make something like this that I designed using the DataTable widget in flutter?

https://i.stack.imgur.com/SaHBj.png

Jack Maring
  • 107
  • 3
  • 8

3 Answers3

2

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,
                    ),
                  ]),
                ],
              ),
            );
Ronak
  • 180
  • 1
  • 11
1

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

ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10)),
   child: Table(),
),
Wai Han Ko
  • 760
  • 5
  • 16
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

youssef ali
  • 406
  • 5
  • 11