Flutter - 透明的系统导航栏答案

【问题标题】：Flutter - Transparent System Navigation BarFlutter - 透明的系统导航栏
【发布时间】：2021-07-30 03:46:02
【问题描述】：

我想在 Flutter 中让底部导航栏透明。

这是我在main.dart 中尝试过的内容

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
  runApp(MyApp());
}

我的主脚手架中也有这个：

extendBodyBehindAppBar: true,
extendBody: true,

但结果是这样的：

应用栏可以正常工作，但不是最底部。有关如何解决此问题的任何想法？

【问题讨论】：

您是否在 Scaffold 中应用您的背景？
您是否使用了“SafeArea”小部件？
@Thepeanut 是的，我是。
@KuKu 不，我没有。

标签： android ios flutter dart navigationbar

【解决方案1】：

将此作为答案发布。

目前，您在 Scaffold 内应用背景，而 Scaffold 本身在内部将 SafeArea 应用到身体（这就是为什么您的身体永远不会到达屏幕底部的原因）。
为了达到您需要的结果 - 在脚手架之前应用背景。例如：

DecoratedBox(
    decoration: BoxDecoration(
        color: Colors.red,
    ),
    child: Scaffold(...),
)

【讨论】：

如果我没有应用背景颜色而只是需要在其下方绘制一些东西怎么办？在我的例子中，背景颜色很好，但我有一个墨水池，其飞溅不会在区域下方移动。这只是脚手架内置安全区域的一般限制吗？
@CalebRobinson 对不起，我不明白你需要什么。你能提供一些例子吗？也许是图片。