Flutter Question posted in
The official Flutter documentation can be found here.

How do you programatically close an opened DropdownMenu in flutter

I’ve been trying to find a solution for this problem to no avail.

Is there a way in flutter (currently running version 3.22.2) to programatically close an opened DropdownMenu , ie. closing the dropdown as a reaction to something external, not via a user tap?

I’ve tried various methods, Including Navigator.pop(context) with a GlobalKey, but it seems that underneath the Hood DropdownMenu is using overlays to show the dropdown items, and doing a pop simply closes any window the dropdown currently resides in.

For my specific use case, I would like to close the dropdown menu whenever Android users preses the system back button.

Thank you for all your help!

PS: The highlighted issue is related to DropdownMenu widget linked above, ie the Material 3 version of Dropdown Button.

Tags:

2

Answers


  1. 0 
    Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (3 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.3

    import 'package:flutter/material.dart';

void main() async {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const TestApp(),
    );
  }
}

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

  @override
  State<TestApp> createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          value: "One",
          items: const [
            DropdownMenuItem(value: "One", child: Text("One")),
            DropdownMenuItem(child: Text("Two")),
            DropdownMenuItem(child: Text("Three"))
          ],
          onChanged: (value) {},
        ),
      ),
    );
  }
}

    Here’s the output: video

    Login or Signup to reply.
  2. 0

    Unfortunately, there is no way to open or close DropdownMenu widget.

    If you take a look closely in the documentation of DropdownMenu, you will find that the _DropdownMenuState class is private therefor we counldn’t access the state of this widget using GobalKey besides the MenuController is instantiated privately.

    DropdownMenu docs

    To solve this problem we have to use another widget.

    You can create your own DropdownMenu using Menu Anchor in a separate file.

    In your your screen which uses the new DropdownMenu, wrap it with PopScope widget to handle back button.

    PopScope(
  canPop: false,
  onPopInvoked: (bool didPop) {
    if (didPop) {
      return;
    }
    if (_controller.isOpen) {
      _controller.close();
    } else {
      Navigator.pop(context);
    }
  },
  child: ...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search