Flutter：底部导航栏覆盖的全屏背景图像

Question

使用以下 Flutter 代码 (v.1.22.5)，我正在努力解决背景图像无法全屏显示的问题（目前在 Android 11 中，尚未针对 iOS 进行测试），因为它被屏幕最底部的白色部分覆盖。如何使底部突出显示的白条消失/透明 - 或者还必须做什么 - 以便可以真正全屏感知背景图像？我尝试了几种方法，但没有任何帮助。

我的代码：

class _LoadingState extends State<Loading> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent, // navigation bar color

      systemNavigationBarDividerColor:
          Colors.transparent, //Navigation bar divider color
    ));

    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/images/background.jpg'),
                  fit: BoxFit.cover),
            ),
          ),
          Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  IconButton(
                    icon: Icon(
                      Icons.home,
                      color: Theme.of(context).accentColor,
                    ),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(
                      Icons.home,
                      color: Theme.of(context).accentColor,
                    ),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(
                      Icons.home,
                      color: Theme.of(context).accentColor,
                    ),
                    onPressed: () {},
                  ),
                ],
              )),
        ],
      ),
    );
  }
}

Answer 1

在您的 initState 中调用它以隐藏状态和导航栏。

SystemChrome.setEnabledSystemUIOverlays([]);

但是如果您只想隐藏底部导航栏，请尝试在您的 initState 上调用它。

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);