Reputation:
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
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,
Upvotes: 1
Views: 502
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