Full screen in Flutter with android 12 api31

Question

Hi everyone I have problems with the full screen I have tried various settings but I can not get a full screen on android 12 api31.

Currently I have set it like this.

I run app like this

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []).then(
      (_) => runApp(MyApp()),
);

in styles.xml

<style name="NormalTheme" parent="@android:style/Theme.Translucent.NoTitleBar">
    // Important to draw behind cutouts
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

in AndroidManifest.xml

 android:windowSoftInputMode="adjustResize"

I also tried other things but currently the best result I have is this

return Scaffold(
    body: Container(
      color: Colors.deepPurple,
      child: const Center(
        child: Text(
          "Container full",
          style: TextStyle(fontSize: 40),
        ),
      ),
    ),
    );

I would like to cover the entire screen but I can't even cover the notch

The end result should be like this. I want to be able to manipulate the entire screen space for my app. I don't want system bars.

What you want to do exactly? Can you please provide more clerification? — Developer, Mar 23 '22 at 11:46
I want to have a full screen complete with notch currently I have a black space above as you can see in the photo — Andrei, Mar 23 '22 at 11:48
Then take one Container and add it's width property with MediaQuery.of(context).size.width. — Developer, Mar 23 '22 at 11:55
Or you can use backgroundcolor of Scaffold property too. It will cover whole screen — Developer, Mar 23 '22 at 11:58
none of your suggestions work the dimensions provided by the MediaQuery are exactly those of the purple part provided in the demo. It doesn't really apply full screen my question was if I forgot any settings for this or are there other ways to do it. — Andrei, Mar 23 '22 at 12:01

score 0 · Answer 1 · answered Dec 10 '22 at 21:50

You need to manipulate on SystemChrome settings. Like this one:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

I think it will be useful to read its documentation also. Docs

In case it's not fit for you on iOS, you can always manipulate overlays by yourself using manual value as enabled system UI mode. But you actually forgot what overlays to enable. You can try this also:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
  overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);

Full screen in Flutter with android 12 api31

1 Answers1