dart 将容器设置为底部导航栏的子项,但现在屏幕底部和导航栏之间有一个空格

uurity8g  于 2023-10-13  发布在  其他
关注(0)|答案(2)|浏览(112)

所以我创建了我自己的底部应用程序栏以下的教程。但是,底部导航栏和屏幕底部之间有一个白色空间。我用白色把这个地方涂上颜色以示出来。我怎样才能使我的容器实际的导航栏和隐藏的空间?

import 'package:flutter/material.dart';

class bottomAppBar extends StatelessWidget {
  const bottomAppBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      color: Colors.white,
      child: Container(
        color: Color(0xFF313131).withOpacity(0.7),
        height: 50,
        width: double.maxFinite,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              icon: Icon(
                Icons.home,
                color: Colors.white,
              ),
            ),
            IconButton(
              onPressed: () {
                Navigator.pushNamed(context, '/discover');
              },
              icon: Icon(
                Icons.search,
                color: Colors.white,
              ),
            ),
            IconButton(
              onPressed: () {
                Navigator.pushNamed(context, '/mybookings');
              },
              icon: Icon(
                Icons.hello,
                color: Colors.white,
              ),
            ),
            IconButton(
              onPressed: () {
                Navigator.pushNamed(context, '/user');
              },
              icon: Icon(
                Icons.person,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
u0njafvf

u0njafvf1#

你把SafeArea放进你的脚手架里了吗?当你使用SafeArea小部件并且你的屏幕不是矩形时,它会在屏幕的顶部和底部创建填充。

wlzqhblo

wlzqhblo2#

我重新发布吉姆的这条评论作为一个答案,以便人们注意到它:
“尝试将脚手架背景颜色设置为Color(0xFF 313131).withOpacity(0.7)”- Jim
尝试根据您正在使用的应用程序主题为脚手架设置背景颜色。

相关问题