flutter: android navbar stays after keyboard use, even though in SystemUiMode.immersive

Question

i have a flutter app using SystemUiMode.immersive, but when i use my keyboard and discards it, the navbar (and status bar) stays on the app.

I have code that removes them if you touch the screen, but sometimes they hide things and users get confused.

any solution?

Answer 1

You can use FocusNode to listen to the changes that you need in keyboard focus.

FocusNode _focusNode = FocusNode();

@override
void initState() {
  super.initState();
  _focusNode.addListener(() {
    if (!_focusNode.hasFocus) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    }
  });
}

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

Widget build(BuildContext context) {
  return Scaffold(
    body: GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: // Your child...
    ),
  );
}

This means that when your keyboard is dismissed, you can hide the system ui programmitically.

Happy coding...