Настраиваемая кнопка выпадающего меню и элементы меню - PullRequest
Новая
       18

Настраиваемая кнопка выпадающего меню и элементы меню

0 голосов
/ 13 января 2020

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

Source inspiration

вот код I до сих пор пробовал, я получил ширину раскрывающегося списка, чтобы соответствовать контейнеру, но элементы не могут быть настроены до сих пор, и всегда высота начинается сверху кнопки и не занимает ширину контейнера: 

body: Container(
    margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
    child: Container(
      width: double.infinity,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          border: Border.all(color: Colors.brown, width: 1.0)),
      padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      child: DropdownButtonHideUnderline(
        child: ButtonTheme(
          alignedDropdown: true,
          child: DropdownButton(
            isExpanded: true,
            isDense: true,
            value: selection,
            icon: Icon(
              Icons.arrow_drop_down,
              color: Colors.brown,
            ),
            iconSize: 40,
            underline: Container(
              height: 1,
              color: Colors.transparent,
            ),
            onChanged: (String val) => setState(() => selection = val),
            items: settingsOptions.map((option) {
              return DropdownMenuItem(
                value: option,
                child: Text(option),
              );
            }).toList(),
          ),
        ),
      )
    ),
  ),

Это вывод из кода: Different Output

Как настроить ширину, высоту элементов и добавить разделители, как на первом изображении? Спасибо

1 Ответ

1 голос
/ 13 января 2020

Это пример изменения, как вам нравится! 

DropdownButton(
        isExpanded: true,
        isDense: true,
        value: selection,
        icon: Icon(
          Icons.arrow_drop_down,
          color: Colors.brown,
        ),
        iconSize: 40,
        underline: Container(
          height: 1,
          color: Colors.transparent,
        ),
        onChanged: (String val) => setState(() => selection = val),
        items: sampleList.map((option) {
          return DropdownMenuItem(
            value: option,
            child: Container(
              width:double.infinity,
              alignment:Alignment.centerLeft,
              padding: const EdgeInsets.fromLTRB(0,8.0,0,6.0),
              child:Text(option),
              decoration:BoxDecoration(
              border:Border(top:BorderSide(color:Colors.grey,width:1))
              )
            ),
          );
        }).toList(),
        selectedItemBuilder:(con){
              return sampleList.map((m){
                return Text(m,);
              }).toList();
            }
      )

pic

...