带有复选框的自定义下拉菜单

Question

我是 flutter 的新手。它是自定义下拉菜单，所有边框都带有圆角。并且还列出了带有复选框的下拉菜单。

我尝试了几个渲染对象的例子。但我不知道如何得到这个设计。

谁能帮我设计一下？

示例

class _DropdowncustomState extends State<Dropdowncustom> {
  late String valueChoose;
  List listitem = [
    "Item 1","Item 1","Item 1","Item 1","Item 1"
  ];
  List _gender = [ 'Male','Female','Other'];
  String  ? _genderval;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.only(left:10,right:10),

          decoration: BoxDecoration(
            border: Border.all(color:Colors.transparent),
            borderRadius: BorderRadius.all(Radius.circular(30)),
            color: Colors.white,
          ),
          child: DropdownButton(
            hint: Text('Gender'),
            dropdownColor: Colors.white,



            // dropdownColor: Colors.grey[200],
            value: _genderval,
             isExpanded: true,
            onChanged: (value)
            {
              setState(() {
                _genderval= value as String?;
              });
            },
            items: _gender.map((value)
            {
              return DropdownMenuItem(
                value: value,
                child: Text(value) ,);
            }



            ).toList(),

          ),

        ),


      ),
    );
  }
}

Answer 1

关注 link Flutter Dropdown.

如果您不想搜索，只需设置 -> showSearchBox: false,

第二件事是你必须用 flutter checkbox 替换图标。

在 DropDownSearch() 中使用这两个功能

 dropdownBuilder: _customDropDownExample,
 popupItemBuilder: _customPopupItemBuilderExample,

而这些是-

Widget _customDropDownExample(
  BuildContext context, UserModel? item, String itemDesignation) {
if (item == null) {
  return Container();
}

return Container(
  child: (item.avatar == null)
      ? ListTile(
          contentPadding: EdgeInsets.all(0),
          leading: CircleAvatar(),
          title: Text("No item selected"),
        )
      : ListTile(
          contentPadding: EdgeInsets.all(0),
          leading: CircleAvatar(
              // this does not work - throws 404 error
              // backgroundImage: NetworkImage(item.avatar ?? ''),
              ),
          title: Text(item.name),
          subtitle: Text(
            item.createdAt.toString(),
          ),
        ),
);

}

第二个是-

Widget _customPopupItemBuilderExample(
  BuildContext context, UserModel item, bool isSelected) {
return Container(
  margin: EdgeInsets.symmetric(horizontal: 8),
  decoration: !isSelected
      ? null
      : BoxDecoration(
          border: Border.all(color: Theme.of(context).primaryColor),
          borderRadius: BorderRadius.circular(5),
          color: Colors.white,
        ),
  child: ListTile(
    selected: isSelected,
    title: Text(item.name),
    subtitle: Text(item.createdAt.toString()),
    leading: CircleAvatar(
        // this does not work - throws 404 error
        // backgroundImage: NetworkImage(item.avatar ?? ''),
        ),
  ),
);

}

Answer 2

为了实现这一点，您可以将下拉菜单包装在 Card 小部件中，并且为了为框制作圆角，您可以像这样设置卡片的形状值：

Card (child: ... , 
shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
              topLeft: Radius.circular(//whatever value you want), 
              topRight: Radius.circular(),
...
            ));

带有复选框的自定义下拉菜单

Custom dropdown flutter with checkbox

checkbox

user-interface

checkboxlist

dropdown

flutter