requestFocusOnTap property

bool? requestFocusOnTap
final

Determine if the dropdown menu 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.

This sample demonstrates how the enabled and requestFocusOnTap properties affect the textfield's hover cursor.

To see it in action, copy and run this code snippet on DartPad.

import 'package:collection/collection.dart';
import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [DropdownMenu].

const List<String> list = <String>['One', 'Two', 'Three', 'Four'];

void main() => runApp(const DropdownMenuApp());

class DropdownMenuApp extends StatelessWidget {
  const DropdownMenuApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownMenu Sample')),
        body: const Center(child: DropdownMenuExample()),
      ),
    );
  }
}

class DropdownMenuExample extends StatefulWidget {
  const DropdownMenuExample({super.key});

  @override
  State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}

typedef MenuEntry = DropdownMenuEntry<String>;

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  static final List<MenuEntry> menuEntries = UnmodifiableListView<MenuEntry>(
    list.map<MenuEntry>((String name) => MenuEntry(value: name, label: name)),
  );
  String dropdownValue = list.first;

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;

    return ListView(
      children: <Widget>[
        ListTile(
          tileColor: colorScheme.primaryContainer,
          title: const Column(
            crossAxisAlignment: .start,
            children: <Widget>[
              Text('enabled: true'),
              Text('requestFocusOnTap: true'),
            ],
          ),
          subtitle: Column(
            children: <Widget>[
              DropdownMenu<String>(
                requestFocusOnTap: true,
                initialSelection: list.first,
                expandedInsets: EdgeInsets.zero,
                onSelected: (String? value) {
                  setState(() {
                    dropdownValue = value!;
                  });
                },
                dropdownMenuEntries: menuEntries,
              ),
              const Text(
                'Text cursor is shown when hovering over the DropdownMenu.',
              ),
            ],
          ),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: colorScheme.primaryContainer,
          title: const Column(
            crossAxisAlignment: .start,
            children: <Widget>[
              Text('enabled: true'),
              Text('requestFocusOnTap: false'),
            ],
          ),
          subtitle: Column(
            children: <Widget>[
              DropdownMenu<String>(
                requestFocusOnTap: false,
                initialSelection: list.first,
                expandedInsets: EdgeInsets.zero,
                onSelected: (String? value) {
                  setState(() {
                    dropdownValue = value!;
                  });
                },
                dropdownMenuEntries: menuEntries,
              ),
              const Text(
                'Clickable cursor is shown when hovering over the DropdownMenu.',
              ),
            ],
          ),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: colorScheme.onInverseSurface,
          title: const Column(
            crossAxisAlignment: .start,
            children: <Widget>[
              Text('enabled: false'),
              Text('requestFocusOnTap: true'),
            ],
          ),
          subtitle: Column(
            children: <Widget>[
              DropdownMenu<String>(
                enabled: false,
                requestFocusOnTap: true,
                initialSelection: list.first,
                expandedInsets: EdgeInsets.zero,
                onSelected: (String? value) {
                  setState(() {
                    dropdownValue = value!;
                  });
                },
                dropdownMenuEntries: menuEntries,
              ),
              const Text(
                'Default cursor is shown when hovering over the DropdownMenu.',
              ),
            ],
          ),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: colorScheme.onInverseSurface,
          title: const Column(
            crossAxisAlignment: .start,
            children: <Widget>[
              Text('enabled: false'),
              Text('requestFocusOnTap: false'),
            ],
          ),
          subtitle: Column(
            children: <Widget>[
              DropdownMenu<String>(
                enabled: false,
                requestFocusOnTap: false,
                initialSelection: list.first,
                expandedInsets: EdgeInsets.zero,
                onSelected: (String? value) {
                  setState(() {
                    dropdownValue = value!;
                  });
                },
                dropdownMenuEntries: menuEntries,
              ),
              const Text(
                'Default cursor is shown when hovering over the DropdownMenu.',
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Implementation

// TODO(framework): Replace the following block with a @dartpad directive
// when it's supported. https://github.com/dart-lang/dartdoc/issues/4123
/// {@macro material_ui.dartpad_guide}
///
/// {@example /example/lib/dropdown_menu/dropdown_menu.2.dart#body}
///
/// </callout-box>
final bool? requestFocusOnTap;