Display mapping list into column for flutter

Question

Right now i have this mapping list

List<Map<String, String>> productMap = [];

And it contain [{numOfDay: 0, amount: 814.75}, {numOfDay: 1, amount: 0.00}, {numOfDay: 2, amount: 0.00}, {numOfDay: 3, amount: 0.00}, {numOfDay: 4, amount: 0.00}, {numOfDay: 5, amount: 0.00}, {numOfDay: 6, amount: 0.00}, {numOfDay: 7, amount: 0.00}, {numOfDay: 8, amount: 0.00}, {numOfDay: 9, amount: 0.00}, {numOfDay: 10, amount: 0.00}, {numOfDay: 11, amount: 0.00}, {numOfDay: 12, amount: 0.00}]

How do i display it into a column to become something like this

Answer 1

You can display 'producMap' List data like below. But you should modify or add layout style.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "landRegistration App",
      theme: new ThemeData(primarySwatch: Colors.amber),
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  final List<Map<String, String>> productMap = [
    {"numOfDay": '0', "amount": '814.75'},
    {"numOfDay": '1', "amount": '0.00'},
    {"numOfDay": '2', "amount": '0.00'},
    {"numOfDay": '3', "amount": '0.00'},
    {"numOfDay": '4', "amount": '0.00'},
    {"numOfDay": '5', "amount": '0.00'},
    {"numOfDay": '6', "amount": '0.00'},
    {"numOfDay": '7', "amount": '0.00'},
    {"numOfDay": '8', "amount": '0.00'},
    {"numOfDay": '9', "amount": '0.00'},
    {"numOfDay": '10', "amount": '0.00'},
    {"numOfDay": '11', "amount": '0.00'},
    {"numOfDay": '12', "amount": '0.00'}
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Title",
      theme: new ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
        body: SafeArea(
          child: Container(
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Text('No of Day'),
                    Text('Amount(RM)'),
                  ],
                ),
                Divider(height: 1),
                ListView.separated(
                  shrinkWrap: true,
                  itemCount: productMap.length,
                  separatorBuilder: (BuildContext context, int index) {
                    return SizedBox(height: 10);
                  },
                  itemBuilder: (context, index) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Text(productMap[index]['numOfDay']),
                        SizedBox(width: 20),
                        Text(productMap[index]['amount']),
                      ],
                    );
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

In Flutter you can use two widget called Colum and Row that can emulate the behaviour of a table.

Note that your data source is not List<Map<String, String>> but List<dynamic>

You code should starting like this:

import 'package:flutter/material.dart';

class TableWidget extends StatelessWidget {
  final List<dynamic> productMap = [
    {"numOfDay": 0, "amount": 814.75},
    {"numOfDay": 1, "amount": 0.00},
    {"numOfDay": 2, "amount": 0.00},
    {"numOfDay": 3, "amount": 0.00},
    {"numOfDay": 4, "amount": 0.00},
    {"numOfDay": 5, "amount": 0.00},
    {"numOfDay": 6, "amount": 0.00},
    {"numOfDay": 7, "amount": 0.00},
    {"numOfDay": 8, "amount": 0.00},
    {"numOfDay": 9, "amount": 0.00},
    {"numOfDay": 10, "amount": 0.00},
    {"numOfDay": 11, "amount": 0.00},
    {"numOfDay": 12, "amount": 0.00}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(50.0),
        child: Column(children: [
          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
            Text("No o Day"),
            Text("Amount (RM)"),
          ]),
          ..._getBody(),
        ]),
      ),
    );
  }

  _getBody() {
    return productMap.map((e) => Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
          Text(e["numOfDay"].toString()),
          Text(e["amount"].toString()),
        ]));
  }
}

Output: