why Scalffold is not filling bottom of the screen in android?

Question

I am new to Flutter. My screen don't have anything else - only a scaffold. I don't know why, it is not filling the entire screen.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyHomePage(),
    ),
  );
}

class MyHomePage extends StatefulWidget {

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
          backgroundColor: Colors.green,

          
    );
  }
}

Answer 1

I think this is because the bottom area is a part of the Android navigation bar, hence you need to change the background of it explicitly:

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(systemNavigationBarColor: Colors.green),
  );

  runApp(
    MaterialApp(
      home: MyHomePage(),
    ),
  );
}

For more information, check the documentation.