Flutter container does not cover whole screen when set in full screen mode

Question

I try to use SystemChrome.setEnabledSystemUIOverlays([]); to use full screen mode in flutter. It works but the container seems to not cover the whole screen. It's like it moved up to cover the system bar like the image below, leaving some spaces at the bottom. How to solve this?

My codes are:

class MainPage extends StatefulWidget {
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Center(
            child: Container(
                decoration: BoxDecoration(gradient: radialAppBackground)),
          ),
        ));
  }
}

Did you tried to change your Scaffold for a Material widget? o just a Container? — Mariano Zorrilla, Oct 27 '20 at 01:08
Do you want you screen to cover navigation bar but not the status bar? Because if you just want your container to be full screen that does not cover status or navigation bar, you do not need `SystemChrome.setEnabledSystemUIOverlays([]);`. — ASAD HAMEED, Oct 27 '20 at 01:40
@MarianoZorrilla your comment made me realize where I did wrong. My intention is to cover all area, the scaffold was not relevant (was just copy pasted from the main.dart) so after I remove the Scaffold and leave only Material widget with Container, ail is good. Can you rephrase that as an answer so I can accept your solution? — ewin.str, Oct 27 '20 at 02:25

score 2 · Answer 1 · answered May 09 '23 at 12:34

Before

Using immersiveSticky will hide the StatusBar and navigation bar

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

After

Missing in other answers

You might notice that now the size of the app got smaller (DEBUG banner is below the camera) and there is a black area at the top

As described here to solve it please add the following line to android/app/src/main/res/values/styles.xml

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

This way you can continue to use Scaffold while removing the black area at the top.

score 1 · Answer 2 · answered Oct 27 '20 at 01:36

You need to wrap your Scaffold in SafeArea Widget.

Benefits of SafeArea from flutter docs

A widget that insets its child by sufficient padding to avoid intrusions by the operating system.

For example, this will indent the child by enough to avoid the status bar at the top of the screen.

It will also indent the child by the amount necessary to avoid The Notch on the iPhone X, or other similar creative physical features of the display.

You may refer to the docs,

https://api.flutter.dev/flutter/widgets/SafeArea-class.html

This answer looks more comprehensive,

https://stackoverflow.com/a/54564767/10285344

score 0 · Accepted Answer · answered Oct 27 '20 at 20:27

0

Your MaterialApp is using Scaffold which has a dedicated space for the BottomNavigationBar, removing Scaffold for Material and/or Container should fix this problem and have a full screen design.

answered Oct 27 '20 at 20:27

Mariano Zorrilla

7,165
2
34
52

Flutter container does not cover whole screen when set in full screen mode

3 Answers3

Missing in other answers