How to avoid the user can to write on DropdownMenu in flutter? - flutter

Question

I need to avoid the user can to type on the DropdownMenu Widget, but I cannot find how to do that. I was looking for in the api.flutter.dev, But I did not find anything.I would appreciate the help.
class TDSMDropdown extends StatefulWidget {
final List<String> items;
final String? value;
final String? hintText;
final String? label;
final void Function(String?)? onSelected;
final TextEditingController? controller;
const TDSMDropdown({
Key? key,
required this.items,
this.value,
this.hintText,
required this.label,
this.onSelected,
this.controller,
}) : super(key: key);
#override
State<TDSMDropdown> createState() => _TDSMDropdownState();
}
class _TDSMDropdownState extends State<TDSMDropdown> {
// final TextEditingController colorController = TextEditingController();
String? selectedValue;
#override
void initState() {
super.initState();
selectedValue = widget.value;
}
_handleOnSelected(String? newVal) {
widget.onSelected!(newVal);
}
#override
Widget build(BuildContext context) {
return DropdownMenu<String>(
width: MediaQuery.of(context).size.width,
enableSearch: false,
// controller: colorController,
label: widget.label == null ? null : Text(widget.label!),
dropdownMenuEntries: widget.items
.map((e) => DropdownMenuEntry<String>(value: e, label: e))
.toList(),
// inputDecorationTheme: _decoration(),
onSelected: widget.onSelected != null ? _handleOnSelected : null,
);
}
Information
Flutter version 3.7.0
Material 3
dart 2.19.0
Attached the image of the current behavior. Currently I can write on the dropdown input, I do not want that.
I need the same behavior that the DropdownButton2 package has.

Answer 1

you can use DropdownButtonFormField widget for this here is the example
DropdownButtonFormField<int>(
decoration: const InputDecoration(
label: Text("Role"),
),
value: 0,
items: [
const DropdownMenuItem(
alignment: Alignment.center,
value: 0,
enabled: false,
child: Text("Select Your role"),
),
DropdownMenuItem(
value: 1,
child: const Text("Admin"),
onTap: () {
role = "Admin";
},
),
DropdownMenuItem(
value: 2,
child: const Text("Miner"),
onTap: () {
role = "Miner";
},
),
DropdownMenuItem(
value: 3,
child: const Text("Polisher"),
onTap: () {
role = "Polisher";
},
),
DropdownMenuItem(
value: 4,
child: const Text("Certifier"),
onTap: () {
role = "Certifier";
},
),
DropdownMenuItem(
value: 5,
child: const Text("Q/A"),
onTap: () {
role = "Q/A";
},
),
],
onChanged: (value) {
value = value;
},
),
which will give you this result