How to access (Populate ) values in a map where , value is a list

Question

Problem description

I'm having this Map of items in a StatefulWidget , I'd like to use keys( Which are String) as a hint in the List of Dropdown buttons. And Values( which are List ) as items in the Dropdown Menus.

 final Mapdropdownlist  = { 'Category': [ 'A', 'B', 'C', 'D', 'C', 'E' ], 'Availiblity': ['F,'G], 'From': [], 'Instant Booking': [], 'Pricing': [12,13,14], 'Rating': [], };

My problem is with the values of the Map. which I don't know how to access them. I'd like to populate "A","B","C".... in a DropdownMenu Hints

My code

ListView listofdropdown() {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: mapdropdownlist.keys.length,
      itemBuilder: (context, index) {
        var keymap = mapdropdownlist.keys.elementAt(index);

        return Container(
          width: 210,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.white,
              width: .5,
            ),
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 9.0),
          margin: const EdgeInsets.symmetric(horizontal: 9.0, vertical: 20),
          child: DropdownButton(
            value: valuechoose,
            onChanged: (val) {
              setState(() {
                valuechoose = val;
              });
            },
            dropdownColor: Colors.green,
            hint: Text("$keymap", style: TextStyle(color: Colors.white)),
            items: mapdropdownlist.keys.map((valitem) {
              return DropdownMenuItem(
                child: Text(
                  valitem,
                  style: TextStyle(color: Colors.white),
                ),
                value: valitem,
              );
            }).toList(),
          ),
          alignment: Alignment.center,
        );
      },
    );
  }
}

The errors i get

Answer 1

The errors in your code

There are a couple of problems with your code as shared in your question.

1. Mapdropdownlist should be a Map, not a List:

final mapdropdownlist  = { 'Category': [ 'A', 'B', 'C', 'D', 'C', 'E' ], 'Availiblity': ['F','G'], 'From': [], 'Instant Booking': [], 'Pricing': [12,13,14], 'Rating': [], };

2. You should create your items out of mapdropdownlist[keymap] instead of from mapdropdownlist.keys as follows

items: mapdropdownlist[keymap]?.map((valitem) {
  return DropdownMenuItem(
    child: Text(
      valitem.toString(),
      style: TextStyle(color: Colors.white),
      ),
    value: valitem,
  );
}).toList(),

Working sample

I modified your code to get a complete running sample where the Dropdown menus do show the right items.

Please take a look, i hope it helps you

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: listofdropdown(),
    );
  }

  final mapdropdownlist  = { 'Category': [ 'A', 'B', 'C', 'D', 'C', 'E' ], 'Availiblity': ['F','G'], 'From': [], 'Instant Booking': [], 'Pricing': [12,13,14], 'Rating': [], };

  ListView listofdropdown() {

    dynamic valuechoose;

    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: mapdropdownlist.keys.length,
      itemBuilder: (context, index) {
        var keymap = mapdropdownlist.keys.elementAt(index);

        return Container(
          width: 210,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.white,
              width: .5,
            ),
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 9.0),
          margin: const EdgeInsets.symmetric(horizontal: 9.0, vertical: 20),
          child: DropdownButton(
            value: valuechoose,
            onChanged: (val) {
              setState(() {
                valuechoose = val;
              });
            },
            dropdownColor: Colors.green,
            hint: Text("$keymap", style: TextStyle(color: Colors.white)),
            items: mapdropdownlist[keymap]?.map((valitem) {

              return DropdownMenuItem(
                child: Text(
                  valitem.toString(),
                  style: TextStyle(color: Colors.white),
                ),
                value: valitem,
              );
            }).toList(),
          ),
          alignment: Alignment.center,
        );
      },
    );
  }
}