CODEWITHSUNDEEP
flutterdart
Muhammad Ahmad Tariq
Muhammad Ahmad Tariq

Reputation: 127

How to render data from a list of maps elements inside a DataTable widget flutter?

I have created a DataTable widget with several columns. I have a list of map elements that I want to render inside each row of DataTable sequentially. I have two columns as ID and Name inside DataTable. I want to display each of the elements inside the row i.e. element with ID 1 is displayed in the first row and then the next element in the 2nd row. How to do the rendering so that I have something like a loop which iterates over the whole list and renders the elements one by one?

List<Map<String,dynamic>> myList = [
    {
      'id':1,
      'name':'Ahmad'
    },
    {
      'id':2,
      'name':'Usama'
    },
    {
      'id':3,
      'name':'Habib'
    }
  ];

DataTable widget is:

SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: DataTable(
                  columns: [
                    DataColumn(label: Text('ID')),
                    DataColumn(label: Text('Name')),
                  ],
                  rows: [
                    DataRow(
                      cells: [
                          // How to render here ?
                      ]
                    ),
                  ]
              ),
            ),
          ),

Upvotes: 2

Views: 2659

Answers (1)

LihnNguyen
LihnNguyen

Reputation: 865

It is working for you.

DataTable(
  columnSpacing: 50,
  columns: const <DataColumn>[
    DataColumn(
      label: Text(
        'ID',
        style: TextStyle(
          fontStyle: FontStyle.italic,
        ),
      ),
    ),
    DataColumn(
      label: Text(
        'Name',
        style: TextStyle(
          fontStyle: FontStyle.italic,
        ),
      ),
    ),
  
  ],
  rows: myList
      .map(
        (e) => DataRow(
          cells: [
            DataCell(
              Text(
                e['id'],
                style: TextStyle(
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),
            DataCell(
              Text(
                e['name'],
                style: TextStyle(
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),
          ],
        ),
      )
      .toList(),
),

Upvotes: 2

Related Questions