Flutter how to enter full screen mode

Question

I use setEnabledSystemUIOverlays to hide status bar and virtual button bar.

But there are blanks on the top and bottom of the screen (as seen in the photo):

Does anyone know how to solve it?

Here is my code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(new MyApp());
}

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

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Container(
        color: Colors.red,
      ),
    );
  }
}

Solution 1

set resizeToAvoidBottomPadding: false to Scaffold.

   return Scaffold(
      resizeToAvoidBottomPadding: false,
   );

Solution 2

this it work perfect for me:

  @override
  Widget build(BuildContext context) {

    // To make this screen full screen.
    // It will hide status bar and notch.
    SystemChrome.setEnabledSystemUIOverlays([]);

    // full screen image for splash screen.
    return Container(
            child: new Image.asset('assets/splash.png', fit: BoxFit.fill));
      }
    }

import this

import 'package:flutter/services.dart';

Solution 3

There seems to be an issue on Android. For some reason it does not recalculate the SafeArea.