CODEWITHSUNDEEP
dartflutter
Mugetsu
Mugetsu

Reputation: 1978

Flutter setEnabledSystemUIOverlays hide top statusbar

I encountered a problem when I set the SystemUiOverlay.bottom on my appbarwidget using SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) and noticed that status bar is hidden but once I pull down upper side of the screen it shows and doesn't disappear again. So I came up with the idea to add a gesture detector for the whole widget app to hide it all the time when you press anywhere on the screen. And I am wondering if this is the best solution and there will not be any issues with the performance or whatever. Any thoughts?

void main() => runApp(PlanetsApp());

class PlanetsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () => SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]),
      child: new MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Planets App',
        color: Colors.purple,
        home: HomeScreen(),
      ),
    );
  }
}

Upvotes: 13

Views: 16280

Answers (4)

tavuskusu
tavuskusu

Reputation: 26

For the issue (https://github.com/flutter/flutter/issues/14432) mentioned in comment, I've found a temporary solution. When you hide status bar or bottom bar, Appbar's height remains same and it takes too much space, especially when you are using landscape mode. To fix this, set "primary" property of Scaffold and Appbar false.

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

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

  class _MyAppState extends State<MyApp> {        
    @override
    void initState() {
      SystemChrome.setEnabledSystemUIOverlays([]);
      super.initState();
    }

    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          primary: false,
          appBar: AppBar(
            primary: false,
            backgroundColor: Colors.blue,
          ),
          body: Center(child: Text("It works!")),
        ),
      );
    }
  }

Hope it helps!

Upvotes: 1

Vladimir Demirev
Vladimir Demirev

Reputation: 676

After switching to Flutter I also noticed this behavior :( I dont want to use GestureDetector, and I am not sure where to place SystemChrome.setEnabledSystemUIOverlays so it hides the bar properly...

Instead, I did this: in the Android styles.xml where the App theme is I've added:

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

This makes the sys-bar to always disappear when the app gets clicked

Upvotes: 4

Michael
Michael

Reputation: 105

change your code to this.

    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

Upvotes: 3

goops17
goops17

Reputation: 1160

There is not fix for this as of right now. When status bar is hidden, app bar's height remains the same.

See the github issue: https://github.com/flutter/flutter/issues/14432

Upvotes: 0

Related Questions