How to create table like ui in flutter

Question

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

Thanks,

https://api.flutter.dev/flutter/widgets/Table-class.html – Jordan Davies Jun 25 '19 at 10:11 — Jordan Davies, Jun 25 '19 at 10:11

score 45 · Accepted Answer · answered Jun 25 '19 at 10:14

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

score 8 · Answer 2 · answered Feb 07 '21 at 16:13

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:

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

MBK · Answer 3 · 2022-02-23T14:42:58.467

Flutter has a DataTable class that can be used like this.

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

score 2 · Answer 4 · edited Dec 30 '21 at 11:20

2

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

edited Dec 30 '21 at 11:20

NcXNaV

1,657
4
14
23

answered Dec 30 '21 at 09:21

erdogan

21
1
5

Charles Arko-Clayman · Answer 5 · 2022-10-06T11:19:16.467

All the above solutions work well for static data. But if you are looking at using dynamic data then, the solution below is for you.

  Table(
        border: TableBorder(
            horizontalInside:
                BorderSide(color: scaffoldBgColor, width: 10.0)),
        children: [
   //This table row is for the table header which is static
          TableRow(children: [

            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Text(
                  "INDEX",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black87),
                ),
              ),
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Text(
                  "NAME",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black87),
                ),
              ),
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Text(
                  "ACTION",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black87),
                ),
              ),
            ),
          ]),
      // Using the spread operator to add the remaining table rows which have dynamic data
      // Be sure to use .asMap().entries.map if you want to access their indexes and objectName.map() if you have no interest in the items index.

          ...students.asMap().entries.map(
            (student) {
              return TableRow(
                  decoration: BoxDecoration(color: tertiary),
                  children: [

                    Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: Text(
                          student.value.id.toString(),
                        ),
                      ),
                    ),
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: Text(
                          '${student.value.firstName} ${student.value.surName}',
                        ),
                      ),
                    ),
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 10),
                        child: Checkbox(
                          materialTapTargetSize:
                              MaterialTapTargetSize.shrinkWrap,
                          onChanged: (val) {},
                          value: false,
                        ),
                      ),
                    ),
                  ]);
            },
          )
        ],
      )

How to create table like ui in flutter

5 Answers5

Linked