Flutter Release模式启动时PageView首页偶现加载失败

故障现象 #

• Release模式启动应用时触发崩溃，Debug模式下无法复现
• 崩溃前使用PageView搭配AutomaticKeepAliveClientMixin实现BottomNavigationBar的页面状态保活

错误信息 #

终端抛出如下错误，业务代码中未主动使用空检查运算符，错误堆栈指向Flutter框架内部PageView布局逻辑：

I/flutter (29449): Null check operator used on a null value
I/flutter (29449): #0      _PagePosition.applyViewportDimension (package:flutter/src/widgets/page_view.dart:455)
I/flutter (29449): #1      RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1456)
I/flutter (29449): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1915)
I/flutter (29449): #3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116)
// 省略后续重复的布局流程堆栈
I/flutter (29449): #99     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:997)

涉及业务代码 #

home.dart 代码如下：

import 'package:flutter/material.dart';
import 'package:lottery_rewards/controller.dart';

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

  @override
  State<StatefulWidget> createState() => _HomeView();
}

class _HomeView extends State<HomeView>
    with AutomaticKeepAliveClientMixin<HomeView> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        const MainAppBar(),
        Expanded(
          child: Center(
            child: TextButton(
              child: const Text('Home'),
              onPressed: () {
              },
            ),
          ),
        )
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}

问题原因 #

• 崩溃来自Flutter框架内部代码的空判断，不是业务代码主动调用空检查运算符导致
• Release模式下Flutter会开启树摇优化，组件构建、渲染的时序比Debug模式紧凑，PageView内部负责滚动位置计算的_PagePosition还未完成和视口的绑定，视口就提前触发了布局计算，命中框架内部的空值判断抛出异常
• Debug模式存在大量调试断言、构建流程有额外停顿，刚好避开了这个时序差，因此无法复现问题
• 从贴出的HomeView代码看，单页面保活写法没有错误，问题根源在外层PageView的生命周期管理：绝大多数同类问题都是因为在build方法中重复创建PageController实例、切换tab时提前dispose了PageController，导致保活的子页面持有的旧滚动位置上下文和当前渲染树不匹配

修复方案 #

按优先级选择方案即可：

• 推荐方案：直接替换保活实现，改用IndexedStack实现底部导航页面保活，不会触发PageView的滚动位置初始化逻辑，改动量极小：

  // 将原来的PageView body替换为如下实现
  body: IndexedStack(
    index: 当前选中的tab下标,
    children: 所有tab对应的页面列表,
  )
  

  该组件会保活所有子页面状态，切换tab时不会销毁非激活页面，完全规避PageView的时序问题
• 如果必须使用PageView实现滑动切换tab效果：
  1. 把PageController放在父组件的initState中初始化，在dispose生命周期中统一销毁，绝对不要在build方法里重复创建新的Controller实例
  2. 给PageView添加唯一PageStorageKey，保证滚动位置和Element树正确绑定
  3. 所有PageView滚动控制逻辑统一由持有Controller的父组件处理，不要在保活的子页面里直接操作Controller
• 临时规避方案：升级Flutter到3.10及以上稳定版本，该版本后官方修复了多组PageView在Release模式下的布局时序空值问题

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