Flutter – Map String Dynamic Code Example

flutter map string synamic concepts and code examples

In this post, we will understand the Flutter concepts related to Map<String, Dynamic> with some code example / sample. For greater details, visit Flutter website.

Map<String, dynamic> maps a String key with the dynamic value. Since the key is always a String and the value can be of any type, it is kept as dynamic to be on the safer side. It is very useful in reading a JSON object as the JSON object represents a set of key-value pairs where key is of type String while value can be of any type including String, List<String>, List<Object> or List<Map>. Take a look at the following example:

    "name": "Vitalflux.com",
    "domain": ["Data Science", "Mobile", "Web"],
    "noOfArticles": [
        {"type": "data science", "count": 50},
        {"type": "web", "count": 75}

Above is an example of JSON object comprising of three keys such as name with value of type String, “domain” with value of type List<String> and “noOfArticles” with value of type List<Object> (List<Map>)

Such JSON objects can easily be read with Map<String, dynamic> object and displayed on screen appropriately.

There are various ways in which one could work with Map<String, dynamic> object. They are some of the following:

  • Process it as a Map object
  • Parse it and use it as a Dart object

The following will be required to be done in case the Map<String, dynamic> is parsed and read as a Dart object.

  • A parse method which will parse the Map
  • A Dart object which is created as a result of parsing

The following code represents the parse method which is used to create a Dart object.

class PortalInfoWidget extends StatelessWidget {

  Map<String, dynamic> _portaInfoMap = {
    "name": "Vitalflux.com",
    "domains": ["Data Science", "Mobile", "Web"],
    "noOfArticles": [
      {"type": "data science", "count": 50},
      {"type": "web", "count": 75}

  Widget build(BuildContext context) {
    PortalInfo portalInfo =  PortalInfo.fromJson(_portaInfoMap);
    return ListView(
        children: List.generate(portalInfo.domains.length,(index){
          return Container(
              padding: const EdgeInsets.fromLTRB(20.0, 10.0, 10.0, 10.0),
              child: Text(portalInfo.domains[index].toString())

Note the fromJson factory method called on the PortalInfo (Dart object) which takes the Map<String, dynamic> object and returns the parsed PortalInfo object. A ListView widget is then created on portalInfo.domains object which is List<String> as represented in Map<String, dynamic> JSON representation.

Here is the code for PortalInfo object.

class PortalInfo {
  final String name;
  final List<String> domains;
  final List<Object> noOfArtcles;


  factory PortalInfo.fromJson(Map<String, dynamic> parsedJson){
    return PortalInfo(
        name: parsedJson['name'],
        domains : parsedJson['domains'],
        noOfArtcles : parsedJson ['noOfArticles']

Running the app will create a view like the following:

Flutter - Map String Dynamic Concepts and code examples
Fig 1. Printing List<String> value of Map<String, dynamic> object
Ajitesh Kumar
Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com
Posted in Flutter. Tagged with .

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *