Flutter应用顶部导航栏与底部导航栏存在额外内边距问题求助

开发Flutter应用时，顶部AppBar和底部BottomNavigationBar周围出现额外内边距，产生不必要空白，破坏了预期视觉布局。

相关代码 #

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: onWillPop,
    child: Scaffold(
      backgroundColor: Color(0xFFf2f2fe),
      appBar: AppBar(
        backgroundColor: appBarBg,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'IT Buzz',
              style: TextStyle(color: appBarTxt),
            ),
            SizedBox(
              width: 7,
            ),
            Icon(
              Icons.menu_book_outlined,
              color: Color(0xFFf2f2fe),
            ),
          ],
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color(0xFFFFF6B7),
              Color(0xff00EAFF),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(11.0),
          child: selectedCourse.isEmpty
              ? GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 8.0,
                    mainAxisSpacing: 8.0,
                  ),
                  itemCount: filteredCourses.length,
                  itemBuilder: (context, index) {
                    final courseName = filteredCourses[index];
                    return GestureDetector(
                      onTap: () {
                        navigateToCourses(courseName, index);
                      },
                      child: Card(
                        elevation: 5.0,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: Container(
                          padding: EdgeInsets.all(11.0),
                          decoration: BoxDecoration(
                            color: tileColors[index % tileColors.length],
                            borderRadius: BorderRadius.circular(15.0),
                          ),
                          child: Center(
                            child: Text(
                              courseName,
                              style: TextStyle(
                                fontSize: 16.0,
                                color: Color(0xFFf2f2fe),
                                fontWeight: FontWeight.bold,
                              ),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                )
              : selectedYear.isNotEmpty
                  ? selectedSemester.isNotEmpty
                      ? GridView.builder(
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            crossAxisSpacing: 8.0,
                            mainAxisSpacing: 8.0,
                          ),
                          itemCount: syllabusData[selectedCourse]![
                                  selectedYear]![selectedSemester]!
                              .length,
                          itemBuilder: (context, index) {
                            final subject = syllabusData[selectedCourse]![
                                    selectedYear]![selectedSemester]!
                                .keys
                                .toList()[index];
                            final driveLink = syllabusData[selectedCourse]![
                                selectedYear]![selectedSemester]![subject];

                            return buildSubjectTile(
                                subject, driveLink!, index);
                          },
                        )
                      : GridView.builder(
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            crossAxisSpacing: 8.0,
                            mainAxisSpacing: 8.0,
                          ),
                          itemCount:
                              syllabusData[selectedCourse]![selectedYear]!
                                  .keys
                                  .length,
                          itemBuilder: (context, index) {
                            final semester =
                                syllabusData[selectedCourse]![selectedYear]!
                                    .keys
                                    .toList()[index];
                            return buildSemesterTile(semester, index);
                          },
                        )
                  : GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 8.0,
                        mainAxisSpacing: 8.0,
                      ),
                      itemCount: syllabusData[selectedCourse]!.keys.length,
                      itemBuilder: (context, index) {
                        final year = syllabusData[selectedCourse]!
                            .keys
                            .toList()[index];
                        return buildYearTile(year, index);
                      },
                    ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.black,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.menu_book),
            label: 'Syllabus',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.build),
            label: 'Tools',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.language),
            label: 'Websites',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          if (index != 0 &&
              ScaffoldMessenger.of(context).mounted &&
              !isSnackBarVisible) {
            isSnackBarVisible = true;
            ScaffoldMessenger.of(context)
                .showSnackBar(
                  SnackBar(
                    content: Text('Not Implemented Yet'),
                  ),
                )
                .closed
                .then((_) {
              isSnackBarVisible = false;
            });
          }
        },
      ),
    ),
  );
}

已尝试在AppBar中设置titleSpacing: 0，但未解决额外内边距问题。

有效解决方案 #

1. 修复AppBar的额外内边距

AppBar的默认空白通常来自自动生成的leading占位符，添加以下参数即可消除：

appBar: AppBar(
  backgroundColor: appBarBg,
  automaticallyImplyLeading: false, // 关闭自动生成的返回按钮占位
  leadingWidth: 0, // 移除leading区域的宽度占位
  titleSpacing: 0, // 消除标题与边缘的默认间距
  title: Row(
    // 原有标题内容
  ),
),

如果仍有上下空白，可通过toolbarHeight自定义高度，或用PreferredSize完全自定义AppBar布局：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(56), // 自定义高度
  child: Container(
    color: appBarBg,
    alignment: Alignment.center,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('IT Buzz', style: TextStyle(color: appBarTxt)),
        SizedBox(width:7),
        Icon(Icons.menu_book_outlined, color: Color(0xFFf2f2fe)),
      ],
    ),
  ),
),

2. 修复BottomNavigationBar的额外内边距

BottomNavigationBar的空白多来自默认的padding和类型设置，调整如下：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // 固定布局，消除自适应padding
  selectedItemColor: Colors.black,
  backgroundColor: Color(0xFFf2f2fe), // 与Scaffold背景统一，弱化视觉空白
  elevation: 0, // 可选，移除阴影
  // 原有item和点击事件
),

若底部仍有空白，可设置Scaffold的extendBody: true，让body内容延伸至导航栏下方：

Scaffold(
  extendBody: true,
  // 其他属性
)

3. 消除系统SafeArea影响

如果空白来自系统状态栏/导航栏的SafeArea，可在Scaffold外层包裹SafeArea并设置maintainBottomViewPadding: false，或直接关闭Scaffold的自动SafeArea处理：

Scaffold(
  resizeToAvoidBottomInset: false,
  // 其他属性
)

内容的提问来源于stack exchange，提问作者dumbfuckJuice