Flutter BottomNavigationBar触发owner!._debugCurrentBuildTarget断言错误

问题根源 #

你遇到的断言错误，核心原因是嵌套了多个Scaffold组件：

• HomeScreen本身是一个Scaffold，且它的bottomNavigationBar属性设置为BottomNavButtonBar
• 但BottomNavButtonBar的build方法又返回了另一个Scaffold，这种嵌套违反了Flutter组件树的规范，触发了框架的断言检查。

解决方案 #

重构组件结构，让底部导航栏作为根容器管理所有页面，避免Scaffold嵌套：

1. 修改bottom_nav_button_bar.dart #

让它作为根Scaffold，直接管理页面切换逻辑：

import 'package:class_cred/home_screen.dart';
import 'package:class_cred/profile.dart';
import 'package:class_cred/quests.dart';
import 'package:class_cred/settings.dart';
import 'package:flutter/material.dart';

class BottomNavButtonBar extends StatefulWidget {
  const BottomNavButtonBar({Key? key}) : super(key: key);

  @override
  State<BottomNavButtonBar> createState() => _BottomNavButtonBarState();
}

class _BottomNavButtonBarState extends State<BottomNavButtonBar> {
  int index = 0;

  final List<Widget> _pages = const [
    HomeScreen(),
    Quests(),
    Settings(),
    Profile(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[index],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        onTap: (int newIndex) {
          setState(() {
            index = newIndex;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: "Quests",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "Settings",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "Profile",
          ),
        ],
      ),
    );
  }
}

2. 修改home_screen.dart #

移除外层Scaffold，只保留页面内容部分：

import 'package:class_cred/constants.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Stack(
          children: [
            SingleChildScrollView(
              child: SizedBox(
                child: Image.asset('assets/images/character_and_background.png'),
              ),
            ),
            Positioned(
              left: 30,
              top: 20,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Image.asset(
                    'assets/images/level_back.png',
                    height: 200,
                  ),
                  Stack(
                    children: [
                      Text(
                        '12',
                        style: GoogleFonts.lalezar(
                          fontSize: 125,
                          letterSpacing: 2,
                          color: kDullYellowColor,
                        ),
                      ),
                      Text(
                        '12',
                        style: GoogleFonts.lalezar(
                          fontSize: 125,
                          letterSpacing: 2,
                          foreground: Paint()
                            ..style = PaintingStyle.stroke
                            ..strokeWidth = 6
                            ..color = Colors.black54,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * 0.6,
              left: MediaQuery.of(context).size.width * 0.05,
              right: MediaQuery.of(context).size.width * 0.05,
              child: Column(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: kOffWhite,
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(width: 5, color: kGreenlandGreen),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 20),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            Container(
                              width: 100,
                              height: 100,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(80),
                                color: Colors.red,
                              ),
                              child: ClipOval(
                                child: Image.asset(
                                  'assets/images/avatar_icon.png',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            Text('John Doe', style: kSubheadingXLTextStyle),
                            Text(
                              'XP: 200',
                              style: kSubheadingLargeTextStyle,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 4,
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(vertical: 30),
                    decoration: BoxDecoration(
                      color: kOffWhite,
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(width: 5, color: kGreenlandGreen),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 更新main.dart路由 #

将首页路由指向BottomNavButtonBar：

// ... 其他代码不变
routes: {
  '/start': (context) => const StartScreen(),
  '/password': (context) => const PasswordScreen('email'),
  '/home': (context) => const BottomNavButtonBar(), // 修改此处
  '/register': (context) => const RegisterScreen(),
  '/settings': (context) => const Settings(),
},

补充说明 #

如果Quests、Settings、Profile这些页面也有自己的Scaffold，同样需要移除外层Scaffold，只保留内容部分，确保整个应用只有一个根Scaffold（即BottomNavButtonBar中的Scaffold）。

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