Flutter bottomNavigationBar报错：Page value仅在内容尺寸确定后可用

这个报错的核心原因是bottomNavigationBar依赖的页面布局尺寸还未完全确定就被渲染了。比如你的_buildnavigationBar()方法里可能用到了需要页面尺寸或滚动位置相关的计算（比如PageController的page属性），而这些值在页面内容还没完成布局时是无法获取的。

这里提供几种可行的修复方式：

1. 延迟渲染bottomNavigationBar #

利用页面帧渲染完成后的回调，确保布局尺寸确定后再构建底部导航栏：

bottomNavigationBar: WidgetsBinding.instance.addPostFrameCallback((_) {
  setState(() {
    _showNavBar = true;
  });
}),
// 然后在build中根据_showNavBar状态渲染
Widget build(BuildContext context) {
  return Scaffold(
    bottomNavigationBar: _showNavBar ? _buildnavigationBar() : const SizedBox.shrink(),
    // 其他页面内容
  );
}

或者用FutureBuilder做简单延迟：

bottomNavigationBar: FutureBuilder(
  future: Future.delayed(const Duration(milliseconds: 50)),
  builder: (context, snapshot) {
    return snapshot.connectionState == ConnectionState.done 
        ? _buildnavigationBar() 
        : const SizedBox.shrink();
  },
)

2. 避免直接访问未就绪的布局依赖值 #

如果_buildnavigationBar()依赖PageController的page属性，不要在build方法里直接读取，改用监听器更新状态后再渲染：

late PageController _pageController;
int _currentIndex = 0;

@override
void initState() {
  super.initState();
  _pageController = PageController();
  _pageController.addListener(() {
    setState(() {
      _currentIndex = _pageController.page?.round() ?? 0;
    });
  });
}

@override
void dispose() {
  _pageController.dispose();
  super.dispose();
}

Widget _buildnavigationBar() {
  return BottomNavigationBar(
    currentIndex: _currentIndex,
    // 其他导航栏配置
  );
}

3. 用LayoutBuilder确认尺寸后构建 #

通过LayoutBuilder获取父组件的有效尺寸，确保布局信息可用后再渲染导航栏：

bottomNavigationBar: LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 0 && constraints.maxHeight > 0) {
      return _buildnavigationBar();
    }
    return const SizedBox.shrink();
  },
)

• 不要在build方法中直接访问依赖布局尺寸的动态属性（比如PageController.page、某些需要布局完成后才有效的MediaQuery值），优先通过状态管理或回调延迟获取。
• 如果导航栏依赖页面滚动/切换状态，用监听器更新状态是更安全的做法，避免布局未就绪时的异常。

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