how to avoid Getting whitespace due to removing the appbar and statusbar in android using flutter?

Question

I am new to flutter, i am creating a screen without appbar and status bar, when i run the code its showing a white space in the bottom. If i try to use screenheight to divide it into two then am getting the ovrflowing of my second container.

But the code is running fine in iPhone screen,

Note: i have removed the appbar from the scaffold and removed the notification bar in my main.dart

return Scaffold(
      // appBar: AppBar(title: Text('Screen Height')),
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(color: Colors.white),
            ),
            Expanded(
              child: Container(color: Colors.red),
            )
          ],
        ));

Answer 1

to get full screen app, in your main method:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(MyApp());
}

Answer 2

To add to @LoVe's answer, you might also want to add extendBody:true and extendBodyBehindAppBar: true to your scaffold.

Answer 3

I am unable to replicate the issue you mentioned. Below is the simplest code that I tried using your code on Android emulator and don't see the white space at the bottom:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold( // appBar: AppBar(title: Text('Screen Height')),
        body: Column(children:
        [
          Expanded
            (child: Container
            (color: Colors.white),
          ),
          Expanded(
            child: Container(color: Colors.red),
          )
        ],
        )
    );
    // );
  }
}

Answer 4

There should be an extra line in styles.xml too ,to make this working on Android at least.

 1. Add SystemChrome.setEnabledSystemUIOverlays([]);
 2. Add <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> in styles.xml 

i found a solution here: https://github.com/flutter/flutter/issues/46486