Flutter Table | TableRow With for Loop

Here we will see how to use Table widget to read and show items from List and Map.

First we will be using Table widget and we will set title to it. Then Table widget would take list of children.

Inside the children we will use TableRow to show elements from the List. We will read the one by one using a for loop

Inside the for Loop you may show any kind of widget with custom design. Here we will Container widget to do it.

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: RowClass()),
      )
    );
  }
}

class RowClass extends StatelessWidget {
  const RowClass({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var list = [
      {'id': "123123", "date": "20/08/2016"},
      {'id': "123124", "date": "26/08/2016"},
      {'id': "123125", "date": "26/08/2016"}
    ];
    return  Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('Recent Claims'),
              Table(
                  border: TableBorder.all(color: Colors.black),
                  columnWidths: {
                    0: FixedColumnWidth(200.0),
                    1: FixedColumnWidth(50.0)
                  },
                  children: [
                    for (var item in list)
                      TableRow(children: [
                        Container(
                          margin: const EdgeInsets.all(10),
                          child: Text(item['id']!),
                        ),
                        Container(
                          margin: const EdgeInsets.all(10),
                          child: Text(item['date']!),
                        ),
                      ])
                  ]
                  )
            ]));
  }
}

If you want to know about paginated table click here.