删除底部导航栏和屏幕底部之间的空间

Question

我按照教程创建了自己的底部应用栏。但是，底部导航栏和屏幕底部之间有一个空白区域。我把这个空间涂成白色来展示它。如何使我的容器成为实际的导航栏并隐藏该空间？ 这发生在应用程序中的所有屏幕上，无论它们是否以脚手架、列、容器等开头。

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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

发生这种情况是因为您使用了材料应用程序中的脚手架属性。但是，永远不要用脚手架小部件包装小部件。

在脚手架中包装小部件后，使用bottomNavigationBar 属性放置您的BottomAppBar。然后一切都会完美无缺。

谢谢。

代码（您的更新代码）

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: 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.ac_unit,
                  color: Colors.white,
                ),
              ),
              IconButton(
                onPressed: () {
                  // Navigator.pushNamed(context, '/user');
                },
                icon: Icon(
                  Icons.person,
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出画面