How to create table like ui in flutter

Use Table widget !
That widget allows you to build a table. Code : Table(children : <TableRow>[])

Example :

Table(
  border: TableBorder.all(), // Allows to add a border decoration around your table
  children: [ 
    TableRow(children :[
      Text('Year'),
      Text('Lang'),
      Text('Author'),
    ]),
    TableRow(children :[
      Text('2011',),
      Text('Dart'),
      Text('Lars Bak'),
    ]),
    TableRow(children :[
      Text('1996'),
      Text('Java'),
      Text('James Gosling'),
    ]),
  ]
),

Output: enter image description here

Note: TableRow is a horizontal group of cells in a Table.
Add many TableRow that you want to

You can learn more about Table by watching this official video or by visiting flutter.dev


Flutter has a Table class for this (but you can also do it using simple Row + Column combo).

Here's the link to the Table docs: Flutter Table

Here's a simple example to get you started:

Container(
        color: Colors.white,
        padding: EdgeInsets.all(20.0),
        child: Table(
          border: TableBorder.all(color: Colors.black),
          children: [
            TableRow(children: [
              Text('Cell 1'),
              Text('Cell 2'),
              Text('Cell 3'),
            ]),
            TableRow(children: [
              Text('Cell 4'),
              Text('Cell 5'),
              Text('Cell 6'),
            ])
          ],
        ),
      )

Tags:

Dart

Flutter