How to display Map in dropdown flutter?

Question

I need to implement a dropdown list in which you do not need to select items, but only view it. As an alternative, I decided to use the dropdown widget since I don't know any other options. I ran into a problem, I have a Map with data that needs to be displayed in a drop-down menu, how to do it correctly because it doesn’t work for me, I need to display both weeks and time (attached a screenshot below)? If you know of a better option than using dropdown for my purpose, I'd love to hear a suggestion.

code

class StatusDropdown extends StatefulWidget {
  const StatusDropdown({Key? key}) : super(key: key);

  @override
  State<StatusDropdown> createState() => _StatusDropdown();
}

class _StatusDropdown extends State<StatusDropdown> {
  String? selectedValue;
  bool isChecked = false;

  final Map<String, dynamic> items = {
    'sun': '9:00-14:00',
    'mon': '9:00-14:00',
    'tus': '9:00-14:00',
    'wed': 'Closed',
    'thu': '00:00-24:00',
    'fri': '9:00-14:00',
    'sat': '9:00-14:00',
  };

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 141,
      height: 28,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          offset: const Offset(0, -12),
          items: ...,
        ),
      ),
    );
  }
}

score 2 · Accepted Answer · answered May 11 '22 at 17:25

As per your result screen I have tried it using List instead of Map hope its help to you.

you must used dropdown_below from here

Create your list:

  List dayTime = [
    {'day': 'sun', 'time': '9:00-14:00'},
    {'day': 'mon', 'time': '9:00-14:00'},
    {'day': 'tus', 'time': '9:00-14:00'},
    {'day': 'wed', 'time': 'Closed'},
    {'day': 'thu', 'time': '00:00-24:00'},
    {'day': 'fri', 'time': '9:00-14:00'},
    {'day': 'sat', 'time': '9:00-14:00'},
  ];

One varibale and list our value

List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
var selectedDayTime;

Create initState() and dispose() method:

 @override
  void initState() {
    _dropdownTestItems = buildDropdownTestItems(dayTime);
    super.initState();
  }

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

Add your selected number value in dropdown

List<DropdownMenuItem<Object?>> buildDropdownTestItems(List dayTime) {
    List<DropdownMenuItem<Object?>> items = [];
    for (var i in dayTime) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(
            i['day'].toString() + '\t:\t' + i['time'].toString(),
            style: TextStyle(color: Colors.black),
          ),
        ),
      );
    }
    return items;
  }

Your Widget:

 Container(
          color: Colors.white,
          padding: const EdgeInsets.all(8.0),
          child: DropdownBelow(
            itemWidth: 150,
            itemTextstyle: const TextStyle(
                fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
            boxTextstyle: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w400,
                color: Colors.white54),
            boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
            boxWidth: 150,
            boxHeight: 45,
            boxDecoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                width: 1,
                color: Colors.black,
              ),
            ),
            icon: Icon(
              Icons.arrow_downward,
              color: Colors.black,
            ),
            hint: Text(
              'Select Time',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            value: selectedDayTime,
            items: _dropdownTestItems,
            onChanged: (selectedTest) {
              setState(() {
                selectedDayTime = selectedTest;
               });
            },
          ),
        ),

Your Dropdown button->

Your Dropdown data->

You can refer my same answer here and here, If you put map so refer this answer

How to display Map in dropdown flutter?

1 Answers1

Linked