Flutter Create ListView with Map Object Key Value Pair Data

Map in dart creates object data in Key-Value pair format. In today's tutorial we will create ListView with Map data. We will be creating a Map with 2 keys ID and Title. In the Id we would pass Key ID of particular item and in the Title we will pass Title text which renders on Text in ListView.

Flutter Create ListView with Map Object Key Value Pair Data

1. Creating a Map Object and define multiple items inside it.

 List<Map<String, dynamic>> demoMapData = [
    {"id": 1, "title": "Item 1"},
    {
      "id": 2,
      "title": "Item 2",
    },
    {
      "id": 3,
      "title": "Item 3",
    },
    {
      "id": 4,
      "title": "Item 4",
    },
    {
      "id": 5,
      "title": "Item 5",
    },
    {
      "id": 6,
      "title": "Item 6",
    },
    {
      "id": 7,
      "title": "Item 7",
    },
    {
      "id": 8,
      "title": "Item 8",
    },
    {
      "id": 9,
      "title": "Item 9",
    },
    {
      "id": 10,
      "title": "Item 10",
    },
    {
      "id": 11,
      "title": "Item 11",
    }
  ];

2. Creating ListView.builder() method and Define a Text widget to populate items using Index.

ListView.builder(
	itemCount: demoMapData.length,
	itemBuilder: (BuildContext context, int index) {
	  return Container(
		height: 50,
		width: double.infinity,
		margin: const EdgeInsets.all(2.8),
		color: Colors.cyan,
		child: Center(
			child: Text(
		  '${demoMapData[index]["title"]}',
		  style: const TextStyle(
			  fontSize: 22,
			  color: Colors.white,
			  fontWeight: FontWeight.bold),
		)),
	  );
	})

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  List<Map<String, dynamic>> demoMapData = [
    {"id": 1, "title": "Item 1"},
    {
      "id": 2,
      "title": "Item 2",
    },
    {
      "id": 3,
      "title": "Item 3",
    },
    {
      "id": 4,
      "title": "Item 4",
    },
    {
      "id": 5,
      "title": "Item 5",
    },
    {
      "id": 6,
      "title": "Item 6",
    },
    {
      "id": 7,
      "title": "Item 7",
    },
    {
      "id": 8,
      "title": "Item 8",
    },
    {
      "id": 9,
      "title": "Item 9",
    },
    {
      "id": 10,
      "title": "Item 10",
    },
    {
      "id": 11,
      "title": "Item 11",
    }
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: ListView.builder(
                itemCount: demoMapData.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 50,
                    width: double.infinity,
                    margin: const EdgeInsets.all(2.8),
                    color: Colors.cyan,
                    child: Center(
                        child: Text(
                      '${demoMapData[index]["title"]}',
                      style: const TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    )),
                  );
                })));
  }
}