NTMS
NTMS

Reputation: 846

How to dynamically add dynamic List value into Flutter DataTable?

I have dynamic List as shown below:

List<List<dynamic>> _userTransactionList;

The List contains these values:

[
  [12.9, test, 80, 357.24, James],
  [88.0, test, 19, 357.24, Carol],
  [196.55, test, 34, 357.24, Matthew],
  [48.0, test, 59, 357.24, Brown]
]

As shown above, my _userTransactionList length is 4. I need 3 column as:

Name   Age   Amount

And row cell will be:

Name   Age   Amount 
James  80    12.9
Carol  19    88.0
Matthew 34    199.55
Brown  59    48.0

I can place the cell value manually as shown below, but I don't know how to get those value from list and add to row cells dynamically. Because of my List<List> _userTransactionList values comes from remote server I need to fill DataTable dynamically. Any idea?

Manual Code:

return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columnSpacing: 30.0,
        columns: <DataColumn>[
          DataColumn(
            label: Text(
              'Name',
              style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
            ),
          ),
          DataColumn(
            label: Text(
              'Age',
              style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
            ),
          ),
          DataColumn(
            label: Text(
              'Amount',
              style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
            ),
          ),
          DataColumn(
            label: Text(
              'Mail',
              style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
            ),
          ),
        ],
        rows: <DataRow>[
          DataRow(
            cells: <DataCell>[
              DataCell(Text('James')),
              DataCell(Text('80')),
              DataCell(Text('12.9')),
              DataCell(
                IconButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('James 80 12.9'),
                      ),
                    );
                  },
                  icon: Icon(
                    Icons.email_outlined,
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Carol')),
              DataCell(Text('19')),
              DataCell(Text('88.0')),
              DataCell(
                IconButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Carol 19 88.0'),
                      ),
                    );
                  },
                  icon: Icon(
                    Icons.email_outlined,
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Matthew')),
              DataCell(Text('34')),
              DataCell(Text('199.55')),
              DataCell(
                IconButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Matthew 34 199.55'),
                      ),
                    );
                  },
                  icon: Icon(
                    Icons.email_outlined,
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Brown')),
              DataCell(Text('59')),
              DataCell(Text('48.0')),
              DataCell(
                IconButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('Brown 59 48.0'),
                      ),
                    );
                  },
                  icon: Icon(
                    Icons.email_outlined,
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );

enter image description here

Upvotes: 0

Views: 1239

Answers (1)

NTMS
NTMS

Reputation: 846

Full Code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  List<List<dynamic>> _userTransactionList = [
    [12.9, "BxC", 80, 357.24, "James"],
    [88.0, "ArD", 19, 145.00, "Carol"],
    [196.55, "VsT", 34, 18.60, "Matthew"],
    [48.0, "IhO", 59, 92.19, "Brown"]
  ];
  
  @override
  Widget build(BuildContext context) {
    
    List<DataRow> rows = [];
    for (var i = 0; i < _userTransactionList.length; i++) {
      rows.add(DataRow(cells: [
        DataCell(
          Text(_userTransactionList[i][4].toString()),
        ),
        DataCell(
          Text(_userTransactionList[i][2].toString()),
        ),
        DataCell(
          Text(_userTransactionList[i][0].toString()),
        ),
        DataCell(
          IconButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('Matthew 34 199.55'),
                ),
              );
            },
            icon: Icon(
              Icons.email_outlined,
              color: Colors.red,
            ),
          ),
        ),
      ]));
    }
    return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        //child: _getData01(_userTransactionList, context)
        child: DataTable(
          columnSpacing: 30.0,
          columns: <DataColumn>[
            DataColumn(
              label: Text(
                'Name',
                style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
              ),
            ),
            DataColumn(
              label: Text(
                'Age',
                style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
              ),
            ),
            DataColumn(
              label: Text(
                'Amount',
                style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
              ),
            ),
            DataColumn(
              label: Text(
                'Mail',
                style: TextStyle(color: Colors.deepOrange, fontWeight: FontWeight.bold),
              ),
            ),
          ],
          rows: rows,
        ));
  }
}

Upvotes: 2

Related Questions