How to create table like ui in flutter

Viewed 36023

I am new in flutter just want to know using which widget i can create ui like given in below image.

enter image description here

Thanks,

4 Answers

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

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 DataTable class that can be used like this.


enter image description here

DataTable(
 columns: [
          DataColumn(
            label: Text('ID'),
          ),
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('Code'),
          ),
          DataColumn(
            label: Text('Quantity'),
          ),
          DataColumn(
            label: Text('Amount'),
          ),
        ], 
  rows: [
            
         DataRow(cells: [
            DataCell(Text('1')),
            DataCell(Text('Arshik')),
            DataCell(Text('5644645')),
            DataCell(Text('3')),
            DataCell(Text('265\$')),
         ])
    ])

For advanced configurations, you can check these packages which will help you extend some features like pagination, selection etc.

https://pub.dev/packages/data_tables

https://pub.dev/packages/data_table_2

You can use DataTable widget. This sample shows how to display a DataTable with three columns: name, age, and role.

enter image description here

Related