How to add a label inside the dropdown item with list inside the list (FLUTTER)

Question

  List<Map<String, dynamic>> category = [
    {
      "name": "One",
      "detail": ['1', '1', '1', '1', '1', '1']
    },
    {
      "name": "two",
      "detail": ['2', '2', '2', '2', '2', '2']
    },
    {
      "name": "three",
      "detail": ['3', '3', '3', '3', '3', '3']
    },
  ];

I want to add the name as the label in dropdown item, and the detail as the item. For example, as showing in the picture

The bold text should be the "name", the normal text will be the detail items

How do you create this dropdown menu, where is your code for that? — jraufeisen, Nov 01 '22 at 07:48
the picture dropdown menu is using html to do, that just a sample, since i want to do it by using flutter — Edward, Nov 01 '22 at 08:19
i want do like this https://www.freecodecamp.org/news/content/images/2021/09/multi-select.png — Edward, Nov 01 '22 at 08:22

score 1 · Accepted Answer · answered Nov 01 '22 at 09:00

This can give you an idea of how to possibly do it:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<Map<String, dynamic>> category = [
    {
      "name": "One",
      "detail": ['11', '12', '13', '14']
    },
    {
      "name": "two",
      "detail": ['21', '22', '23', '24']
    },
    {
      "name": "three",
      "detail": ['31', '32', '33', '34']
    },
  ];

  late final List data;
  String? selectedItem;

  @override
  void initState() {
    data = [
      for (final item in category)
        for (final value in item.values)
          if (value is List)
            for (final listValue in value) {'value': listValue, 'bold': false}
          else
            {'value': value, 'bold': true}
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: DropdownButton<String>(
                    value: selectedItem,
                    items: [
                      for (final item in data)
                        item['bold'] == true
                            ? DropdownMenuItem(
                                enabled: false,
                                child: Text(item['value'],
                                    style: const TextStyle(
                                        fontWeight: FontWeight.bold)))
                            : DropdownMenuItem(
                                value: item['value'],
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 8),
                                  child: Text(item['value']),
                                ))
                    ],
                    onChanged: (value) {
                      setState(() {
                        selectedItem = value;
                      });
                    }))));
  }
}

Output:

In the initState I transform the data in a way so you have a list where each item corresponds to a dropdown item. With additional info whether it should be bold or not

Sorry, may I know if the list format is like this https://stackoverflow.com/questions/74355185/showing-the-dropdown-list-with-special-list-and-multiple-dynamic-dependent-dropd how can generate it, I have been trying few days still cannot, Sorry I'm newbie in Flutter — Edward, Nov 10 '22 at 08:42

How to add a label inside the dropdown item with list inside the list (FLUTTER)

1 Answers1