Flutter- "extendBody: true" does absolutely nothing. I want to extend the body behind the navigation bar

Question

I want my body to occupy the entire screen. I've tried using extendBody: true but it seems to do absolutely nothing. Here's the sample code along with a screenshot-

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: Container(
        color: Colors.orange,
        height: double.infinity,
        width: double.infinity,
      ),
      floatingActionButton:
          FloatingActionButton(), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Screenshot:

screenshot

I'm running a pixel 3xl avd with android R

user_9902765 · Answer

Make the app run in full-screen by adding SystemChrome.setEnabledSystemUIOverlays([]); to the build of MyApp class:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return MaterialApp(
...

Set resizeToAvoidBottomPadding: false for the Scaffold to remove the extra space behind the navigation bar:

return Scaffold(
  resizeToAvoidBottomPadding: false,
  body: Container(
    color: Colors.orange,
    height: double.infinity,
    width: double.infinity,
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
  ),
);

Result:

Flutter- "extendBody: true" does absolutely nothing. I want to extend the body behind the navigation bar

1 Answers