androidflutterdartfullscreen

Flutter, Full screen mode in Android 4.4.2 does not work correctly


When I use full screen mode:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

This is my code:

return Scaffold(
  body: Container(
    height: height,
    decoration: BoxDecoration(
      color: Colors.black,
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            IconButton(
              onPressed: () {},
              padding: const EdgeInsets.all(25),
              iconSize: 80.sp,
              icon: const Icon(
                Icons.miscellaneous_services_outlined,
              ),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: Consumer(
                builder: (context, watch, child) {
                  final state = watch(loginNotifierProvider);
                  return Text(
                    state.appVersion,
                    style: Theme.of(context).textTheme.headline6,
                  );
                },
              ),
            ),
          ],
        )
      ],
    ),
  ),
);

There is a white bar at the bottom of the screen although the navigation bar is not visible: enter image description here

But when I wrap the Container in the Column:

return Scaffold(
  body: Column(
    children: [
      Container(
        height: height,
        decoration: BoxDecoration(
          color: Colors.black,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(
                  onPressed: () {},
                  padding: const EdgeInsets.all(25),
                  iconSize: 80.sp,
                  icon: const Icon(
                    Icons.miscellaneous_services_outlined,
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: Consumer(
                    builder: (context, watch, child) {
                      final state = watch(loginNotifierProvider);
                      return Text(
                        state.appVersion,
                        style: Theme.of(context).textTheme.headline6,
                      );
                    },
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    ],
  ),
);

The container takes up full screen, but this causes an error:

enter image description here

How to get rid of this strip?

How to make the application in full screen?

This is android 4.4 api 19.


Solution

  • I have now solved this problem as follows:

    SystemChrome.setEnabledSystemUIMode(
      Platform.isAndroid && androidInfo.version.sdkInt == 19
          ? SystemUiMode.manual
          : SystemUiMode.immersiveSticky,
      overlays: [SystemUiOverlay.bottom]);
    

    When the api version of android is 19, I show the lower navigation enter image description here