Блог

Я пытался создать пункт выпадающего меню, как показано на следующем рисунке.

Мне нужно разработать расширенное выпадающее меню только на изображении чуть ниже текста «Уровень языка…» с 2 текстами внутри пункта выпадающего меню. Я поделюсь кодом выпадающего меню.

 DropdownButton<String>(
  underline: Container(),
  isExpanded: true,
  isDense: true,
  value: selected,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.black),
  onChanged: (value) {
    selectedCallback(value);
    setState(() {
      selected = value;
    });
  },
  
  items: list.map<DropdownMenuItem<String>>((e) {
    return DropdownMenuItem<String>(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [Text(e)],
      ),
      value: e,
    );
  }).toList(),
  selectedItemBuilder: (context) => list
      .map((e) => Text(
            e,
            style: TextStyle(color: Colors.black),
          ))
      .toList(),
)
 

Пожалуйста, помогите мне.
Спасибо

Я нашел решение

 DropdownButton<LanguageModel>(
  underline: Container(),
  isExpanded: true,
  isDense: true,
  value: selected,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.black),
  onChanged: (value) {
    selectedCallback(value);
    setState(() {
      selected = value;
    });
  },
  onTap: () {
    setState(() {
      check = true;
    });
  },
  selectedItemBuilder: (ctxt) {
    return list.map<DropdownMenuItem<LanguageModel>>((e) {
      return DropdownMenuItem<LanguageModel>(
        child: Text(e.level),
        value: e,
      );
    }).toList();
  },
  items: list.map((e) {
    return DropdownMenuItem(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(e.level,style: TextStyle(fontWeight: FontWeight.w400),),
          Text(e.description,style: TextStyle(color: Color.fromARGB(100, 166, 166, 166).withOpacity(1.0),fontSize: 12),),
          Divider(color: Colors.grey,thickness: 1,)
        ],
      ),
      value: e,
    );
  }).toList(),
);