Flutter 3.22.2中如何程序化关闭Material 3的DropdownMenu？

在Flutter 3.22.2的Material3版本中，完全可以通过外部事件程序化关闭DropdownMenu，核心是使用DropdownMenuController来精准控制菜单状态，而非依赖Navigator.pop操作。以下是针对Android系统返回键场景的具体实现方案：

实现步骤 #

1. 创建并绑定控制器
   实例化DropdownMenuController，将其关联到目标DropdownMenu组件，通过控制器直接管理菜单的打开/关闭状态。

2. 监听系统返回键
   通过SystemChannels.navigation监听Android返回键事件，判断菜单是否处于打开状态，若打开则调用控制器的close方法关闭菜单，并拦截默认的页面返回行为。

完整示例代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownMenu 关闭示例')),
        body: const DropdownDemo(),
      ),
    );
  }
}

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

  @override
  State<DropdownDemo> createState() => _DropdownDemoState();
}

class _DropdownDemoState extends State<DropdownDemo> {
  final DropdownMenuController _menuController = DropdownMenuController();
  String? _selectedOption;

  @override
  void initState() {
    super.initState();
    // 监听Android系统返回键
    WidgetsBinding.instance.addPostFrameCallback((_) {
      SystemChannels.navigation.setMethodCallHandler((call) async {
        if (call.method == 'popRoute') {
          // 若菜单已打开，先关闭菜单并拦截返回事件
          if (_menuController.isOpen) {
            _menuController.close();
            return Future.value(true);
          }
          // 菜单未打开时，执行默认返回逻辑
          return Future.value(false);
        }
        return Future.value(false);
      });
    });
  }

  @override
  void dispose() {
    _menuController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: DropdownMenu<String>(
        controller: _menuController,
        initialSelection: _selectedOption,
        onSelected: (String? value) {
          setState(() {
            _selectedOption = value;
          });
        },
        dropdownMenuEntries: const [
          DropdownMenuEntry(value: '选项1', label: '选项1'),
          DropdownMenuEntry(value: '选项2', label: '选项2'),
          DropdownMenuEntry(value: '选项3', label: '选项3'),
        ],
      ),
    );
  }
}

关键说明 #

• DropdownMenuController是Material3 DropdownMenu的专属控制器，专门用于管理菜单的展开/收起状态，相比Navigator.pop不会干扰页面栈，操作更精准。
• 务必在组件销毁时调用_menuController.dispose()，避免内存泄漏。
• 通过_menuController.isOpen可以实时判断菜单的当前状态，以此决定是否拦截返回事件。

内容的提问来源于stack exchange，提问作者JeanPaul A.