How to dismiss an open dropdown in Flutter? - flutter

Question

I've a dropdown on my screen, which I want to close every time the user minimises the app (Pause State). I looked into the DropDownButton widget, and it seems it uses Navigator.push() method, so ideally it should be dismissed with Navigator.pop(), if I'm not wrong.
Here is what I've tried already -
Use global key to get the context of dropdown widget and implement Navigator.pop(key.currentContext) inside didChangeAppLifecycleState() function.
Use focusNode to implement .unfocus() to remove the focus from the dropdown.
Maintain a isDropdownDialogOpen boolean which I set to true on onTap() and false on onChange(). And then simple pop() if its true on app minimisation. But this approach fails when the user opens the dropdown and then closes it by tapping outside the dropdown dialog. I can't set the boolean to false in that case.
My requirement is that - I've to dismiss the dropdown whenever the user minimises the app, if it was open in the first place.
I've gone through bunch of SO questions and GitHub comments, that are even remotely similar, but couldn't find anything helpful.
Loose Code -
class Auth extends State<Authentication> with WidgetsBindingObserver {
bool isDropdownOpen = false;
GlobalKey _dropdownKey = GlobalKey();
FocusNode _focusNode;
#override
void initState() {
WidgetsBinding.instance.addObserver(this);
super.initState();
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
// To pop the open dropdown dialog whenever app is minimised (and opened back on again)
#override
void didChangeAppLifecycleState(AppLifecycleState state) {
switch (state) {
case AppLifecycleState.resumed:
if(isDropdownOpen)
pop();
// Also tried pop(_dropdownKey.currentContext)
break;
case AppLifecycleState.paused:
break;
case AppLifecycleState.inactive:
break;
case AppLifecycleState.detached:
break;
}
}
build() {
return Scaffold(
// Dummy Dropdown button with random values
body: DropdownButton(
key: _dropdownKey,
focusNode: _focusNode,
value: "one",
items: ["one", "two", "three", "four", "five"],
//boolean values changing fine, but when user taps outside the dropdown dialog, dropdown is closed and neither of onChanged() and onTap() is called. Need a call back (or something similar) for this particular case.
onChange(value) => isDropdownOpen = false;
onTap() => isDropdownOpen = ! isDropdownOpen;
)
);
}
}
For your ref - https://github.com/flutter/flutter/issues/87989

Answer 1

Does this work for you?
import 'package:flutter/material.dart';
void main() async {
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with WidgetsBindingObserver {
#override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
AppLifecycleState currentAppLifecycleState;
bool isDropdownMenuShown = false;
#override
void didChangeAppLifecycleState(AppLifecycleState state) {
setState(
() => currentAppLifecycleState = state,
);
}
String value;
#override
Widget build(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (<AppLifecycleState>[
AppLifecycleState.inactive,
AppLifecycleState.detached,
AppLifecycleState.paused,
].contains(currentAppLifecycleState) &&
isDropdownMenuShown) {
print('Closing dropdown');
Navigator.pop(context);
}
});
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: Center(
child: GestureDetector(
onLongPressStart: (LongPressStartDetails details) async {
final left = details.globalPosition.dx;
final top = details.globalPosition.dy;
setState(() => isDropdownMenuShown = true);
final value = await showMenu<String>(
context: context,
position: RelativeRect.fromLTRB(left, top, left, top),
items: <PopupMenuEntry<String>>[
PopupMenuItem(
child: const Text('Option 1'),
value: 'Option 1',
),
PopupMenuItem(
child: const Text('Option 2'),
value: 'Option 2',
),
PopupMenuItem(
child: const Text('Option 3'),
value: 'Option 3',
),
],
);
setState(() => isDropdownMenuShown = false);
if (value == null) return;
print('You chose: $value');
},
child: InkWell(
onTap: () {},
child: Container(
alignment: Alignment.center,
child: Text(
'Long press to show dropdown',
textAlign: TextAlign.center,
),
),
),
),
),
);
}
}
How does it work?
We keep track of the current app state using the didChangeAppLifecycleState method.
Whenever the dropdown is shown the isDropdownMenuShown variable is set to true.
Whenever the dropdown is closed/exited the variable is set to false.
We add a post frame callback (it is called after each rebuild) and we check if the app went into background and if the dropdown is shown. If yes, the dropdown is closed.

Answer 2

You could use FocusManager.instance.primaryFocus?.unfocus();