user11065582
user11065582

Reputation:

How to set mandatory DropDownButton on Flutter with Colors?

I developed like this dropdown. Everything working fine. By default, the dropdown is not select any value. How to set red color border or something like decoration on value equal null(without select). my dropdown code and image

enter image description here

 Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              child: Text('Priority',
                  style: TextStyle(fontWeight: FontWeight.w400)),
            ),
          ),
          // dropBox(),
          Container(
            //  width: 200.0,
            child: ButtonTheme(
              alignedDropdown: true,
              child: DropdownButton<Priority>(
                isExpanded: true,
                value: _priorities,
                //hint: Text("Select"),
                items: priority.map((Priority value) {
                  return DropdownMenuItem<Priority>(
                    value: value,
                    child: Text(
                      value.description,
                      overflow: TextOverflow.ellipsis,
                    ),
                  );
                }).toList(),
                onChanged: (value) => setState(() {
                      priorityIndex = value.id;
                      _priorities = value;
                    }),

             style: Theme.of(context).textTheme.title,
              ),
            ),
          ),

I need to like this dropdown,

enter image description here

Upvotes: 1

Views: 502

Answers (1)

kounex
kounex

Reputation: 1715

You are almost there already. You have wrapped your DropdownButton with a Container - now you only have to set its decoration property in order to achieve your desired styling:

return Container(
  decoration: BoxDecoration(
    border: Border.all(color: _priorities != null ? Colors.red : Colors.transparent),
  ),
  child: DropdownButton(
    ...

Upvotes: 1

Related Questions