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

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,

          
    );
  }
}

CodePudding user response：

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.

CodePudding user response：

You should consider using the SafeArea Widget, it's used to cover the top and bottom of the screen or not : https://api.flutter.dev/flutter/widgets/SafeArea-class.html

The bottom is what you care :

SafeArea(
  child: Scaffold(),
  bottom: false/true,
)

It's aware of the current context MediaQuery and the View Padding