android - How to automatically hide the status bar after scrolling it down?

Question

I want to automatically hide the status bar after 3 seconds of scrolling it down.

currently, I'm doing this.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(seconds: 3), (timer) {
      SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen();
    );
  }
}

I want the timer to begin as soon as the user scrolls the the status bar.

Is there any better way to do that?

Answer 1

You may face existing issue on SystemChrome.

When setting System UI Overlays to bottom or top only, the status bar/bottom will show persistently after clicking.

• Flutter problem full-screen on android #23913
• SystemChrome.setEnabledSystemUIOverlays isn't sticky on android when only disable top #28426

I provide a workaround solution that detect status bar appear and react to it by using WidgetsBindingObserver

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {

  var count = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  ...

  @override void didChangeMetrics() {
    count++;
    Future.delayed(const Duration(seconds: 3), () {
      if(count == 1) {
        SystemChrome.restoreSystemUIOverlays();
      }
      count --;
    });
  }
  ...

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }