为什么 Scalffold 在 android 中没有填满屏幕底部？

Question

我是 Flutter 新手。我的屏幕没有其他任何东西——只有一个脚手架。不知道为什么，它没有填满整个屏幕。

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

您应该考虑使用 SafeArea Widget，它用于覆盖或不覆盖屏幕的顶部和底部： https://api.flutter.dev/flutter/widgets/SafeArea-class.html

下面是你关心的:

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

它知道当前上下文 MediaQuery 和 View Padding

Answer 2

我认为这是因为底部区域是 Android 导航栏的一部分，因此您需要明确更改它的背景：

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

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

有关详细信息，请查看 documentation。

为什么 Scalffold 在 android 中没有填满屏幕底部？

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

android

scaffold

dart

flutter