Flutter底部导航栏报错：Bottom Overflowed By infinity Pixels及页面异常

核心问题拆解 #

1. 无限递归导致崩溃：你在screens列表中直接实例化了focalPointProfile()，而当前State正是属于这个Widget，这会触发无限递归创建组件，直接导致应用崩溃。
2. 布局溢出报错：Column是无高度限制的容器，你直接把screens[_currentIndex]放在其中，若子页面本身是占满全屏的组件（比如包含Scaffold、ListView等），会导致Column高度计算无限，触发Bottom Overflowed By infinity Pixels错误。
3. 背景色未切换：当前Scaffold的backgroundColor固定为Colors.blueGrey[800]，没有根据选中的页面动态调整，所以切换页面时背景色不变。

具体修复步骤 #

1. 修复无限递归

将screens列表中的focalPointProfile()替换为独立的Profile页面组件（比如ProfileScreen()），避免重复创建当前页面：

final List<Widget> screens = [
  dashboardScreen(),
  ProfileScreen(), // 替换成你的实际个人资料页面组件
  mentorRegistrationScreen(),
];

2. 修复布局溢出

在Column中的screens[_currentIndex]外层包裹Expanded，让它占据Column的剩余空间，解决高度溢出问题：

children: <Widget>[              
  // ... 原有文本、分割线、buildTextField等组件
  Expanded( // 新增Expanded包裹
    child: screens[_currentIndex],
  ),
],

3. 修复背景色切换

有两种方案可选：

• 方案一：让每个子页面自己管理Scaffold和背景色
  每个子页面（比如dashboardScreen、ProfileScreen）内部自己实现Scaffold并设置对应的backgroundColor，这样切换页面时会自动应用子页面的背景色。

• 方案二：动态设置当前Scaffold的背景色
  根据_currentIndex的值，动态切换Scaffold的backgroundColor：

backgroundColor: _getBackgroundColor(_currentIndex),

然后添加一个辅助方法：

Color _getBackgroundColor(int index) {
  switch(index) {
    case 0: return Colors.grey[100]; // dashboard的背景色
    case 1: return Colors.blueGrey[800]; // profile的背景色
    case 2: return Colors.white; // mentorRegistration的背景色
    default: return Colors.blueGrey[800];
  }
}

修改后的完整代码示例 #

class _MyStatefulWidgetState extends State<focalPointProfile> {
  int _currentIndex = 0;

  // 新增背景色切换方法
  Color _getBackgroundColor(int index) {
    switch(index) {
      case 0: return Colors.grey[100];
      case 1: return Colors.blueGrey[800];
      case 2: return Colors.white;
      default: return Colors.blueGrey[800];
    }
  }

  Widget build(BuildContext context) {
    final List<Widget> screens = [
      dashboardScreen(),
      ProfileScreen(), // 替换为实际的Profile页面组件
      mentorRegistrationScreen(),
    ];

    return Scaffold(
      resizeToAvoidBottomInset: false,
      endDrawer: drawer(),
      appBar: AppBar(
        actions: [
          Builder(
            builder: (context) => IconButton(
              icon: Icon(Icons.settings, color: Colors.green,),
              onPressed: () => Scaffold.of(context).openEndDrawer(),
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
        ],
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        elevation: 1,
      ),
      backgroundColor: _getBackgroundColor(_currentIndex), // 动态设置背景色
      body: SafeArea(
        minimum: const EdgeInsets.only(top: 100),
        child: Column( 
          children: <Widget>[              
            Text(
              name,
              style: TextStyle(
                fontSize: 40.0,
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontFamily: "Source Sans Pro",
              ),
            ),
            Text(
              position,
              style: TextStyle(
                  fontSize: 30,
                  color: Colors.blueGrey[200],
                  letterSpacing: 2.5,
                  fontWeight: FontWeight.bold,
                  fontFamily: "Source Sans Pro"),
            ),
            SizedBox(
              height: 20,
              width: 200,
              child: Divider(
                color: Colors.white,
              ),
            ),
            buildTextField(email, Icons.web),
            // 用Expanded包裹子页面，解决布局溢出
            Expanded(
              child: screens[_currentIndex],
            ),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        height: 50,
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) => setState(() => _currentIndex = index),
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'home'),
          NavigationDestination(icon: Icon(Icons.person), label: 'profile'),
          NavigationDestination(icon: Icon(Icons.add), label: 'Add Mentor'),
        ],
      ),
    );
  }
}

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