fluttertextformfield

How to disable the text editing in DropdownMenu<T> class?


Is it possible to disable the DropdownMenu class from free text editing by the user (i.e. the dropdown fields are read-only)

example

  DropdownMenu(
            width: maxWidth,
            initialSelection: state.current,
            dropdownMenuEntries: options.map(
              (e) {
                return DropdownMenuEntry(
          
                  value: e,
                  label: e.name ?? "",
                  labelWidget: SizedBox(
                    width: size.width,
                    child: Text(
                      e.name ?? "",
                    ),
                  ),
                );

Solution

  • You can set requestFocusOnTap to false to disable the inner text field:

    DropdownMenu(
      requestFocusOnTap: false,
      initialSelection: state.current,
      dropdownMenuEntries: [
        for (final option in options)
          DropdownMenuEntry(value: option, label: option.name),
      ],
    )
    

    Here's the documentation for this property:

    Determine if the dropdown button requests focus and the on-screen virtual keyboard is shown in response to a touch event.

    Ignored if a focusNode is explicitly provided (in which case, FocusNode.canRequestFocus controls the behavior).

    Defaults to null, which enables platform-specific behavior:

    • On mobile platforms, acts as if set to false; tapping on the text field and opening the menu will not cause a focus request and the virtual keyboard will not appear.

    • On desktop platforms, acts as if set to true; the dropdown takes the focus when activated.

    Set this to true or false explicitly to override the default behavior.

    It was added to Flutter in this PR: https://github.com/flutter/flutter/pull/117504.