Custom dropdown flutter with checkbox

Question

I am new in flutter. It is custom dropdown with rounded corners in all borders. And also drop down menu with checked box listed with it.

I tried few example with render object. but i dont know how to get this design.

Can anyone help me with this design?

Example

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(),

          ),

        ),


      ),
    );
  }
}

Solution

Follow The link Flutter Dropdown.

And if you don't want searchable just set -> showSearchBox: false,

And the second thing is that you have to replace the icons with flutter checkbox.

Use these two features in DropDownSearch()

 dropdownBuilder: _customDropDownExample,
 popupItemBuilder: _customPopupItemBuilderExample,

And these are -

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(),
          ),
        ),
);

}

and second one is -

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 ?? ''),
        ),
  ),
);

}

Comments

[Jahidul Islam]

share your code

[Ann Jael]

i have updated the code

[Ann Jael]

what about the rounded corner in the dropdown menu? how to acheive this

[Ann Jael]

wat about the drop down list...it is still in the same shape

[Benyamin]

according to this page stackoverflow.com/questions/53150219/… you can do something like this and set this property of dropdown menu like this: decoration: ShapeDecoration( shape: RoundedRectangleBorder( side: BorderSide(width: 1.0, style: BorderStyle.solid), borderRadius: BorderRadius.all(Radius.circular(5.0)), ), ),