CODEWITHSUNDEEP
androidflutterdartandroid-12android-api-31
Andrei
Andrei

Reputation: 81

Full screen in Flutter with android 12 api31

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),
        ),
      ),
    ),
    );

enter image description here

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.

enter image description here

Upvotes: 7

Views: 1959

Answers (1)

skylvsme
skylvsme

Reputation: 35

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]);

Upvotes: 0

Related Questions