Flutter中TabBarView导航后热重载返回触发TypeErrorImpl错误

触发场景 #

执行以下操作时控制台抛出错误，但应用运行正常：

1. 从MainView导航至其他页面
2. 执行热重载
3. 返回MainView

环境信息 #

• Flutter版本：3.22.0
• 仅在Chrome Web端出现该错误，Android端无异常
• 替换TabBarView的子组件后问题仍存在，排除子组件导致的问题

MainView代码 #

import 'package:flutter/material.dart';
import '../constants/data.dart';
import '../services/data/data_service.dart';
import 'nutvalues_view.dart';

class MainView extends StatefulWidget {
  const MainView({super.key});

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  @override
  void initState() {
    super.initState();
  }
  
  @override
  void dispose() {
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      // clamping scroll physics to avoid overscroll
      behavior: const ScrollBehavior().copyWith(overscroll: false),
      child: DefaultTabController(
        length: 1,
        child: Scaffold(
          appBar: PreferredSize(
            preferredSize: _tabBar.preferredSize,
            child: Material(
              color: Theme.of(context).appBarTheme.backgroundColor,
              child: SafeArea(child: _tabBar),
            )
          ),
          body: TabBarView( // <------- 错误关联组件
            physics: AlwaysScrollableScrollPhysics(),
            children: const [
              NutritionalValueView(),
            ],
          ),
        )
      ),
    );
  }
  
  TabBar get _tabBar => const TabBar(
    isScrollable: true,
    physics: AlwaysScrollableScrollPhysics(),
    tabs: [
      Tab(text: "Nutrition"),
    ],
  );
}

错误日志 #

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following TypeErrorImpl was thrown while rebuilding dirty elements:
Unexpected null value.

The relevant error-causing widget was:
  TabBarView TabBarView:file:///D:/Workspace/food_tracker/lib/views/main_view.dart:46:17

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3       throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 586:18  nullCheck
packages/flutter/src/widgets/scroll_position.dart 260:53                          get viewportDimension
packages/flutter/src/widgets/page_view.dart 381:19                                getPixelsFromPage
packages/flutter/src/widgets/page_view.dart 215:29                                jumpToPage
packages/flutter/src/material/tabs.dart 1976:7                                    didChangeDependencies
packages/flutter/src/widgets/framework.dart 5647:7                                performRebuild
packages/flutter/src/widgets/framework.dart 5203:7                                rebuild
packages/flutter/src/widgets/framework.dart 2905:18                               buildScope
packages/flutter/src/widgets/binding.dart 1136:9                                  drawFrame
packages/flutter/src/rendering/binding.dart 443:5                                 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1392:7                                [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1313:9                                handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1171:5                                [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1404:5                                invoke
lib/_engine/engine/platform_dispatcher.dart 307:5                                 invokeOnDrawFrame
lib/_engine/engine/initialization.dart 187:36                                     <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 426:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:39  dcall

The element being rebuilt at the time was index 10 of 18:
  TabBarView

修复方案 #

方案1：给TabBarView添加唯一Key，避免热重载复用旧状态

在_MainViewState中定义GlobalKey并绑定到TabBarView：

class _MainViewState extends State<MainView> {
  final GlobalKey _tabBarViewKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      // ...其他代码不变
      body: TabBarView(
        key: _tabBarViewKey,
        physics: AlwaysScrollableScrollPhysics(),
        children: const [
          NutritionalValueView(),
        ],
      ),
      // ...其他代码不变
    );
  }
}

方案2：修改滚动物理特性（推荐，因仅1个Tab）

由于TabBar只有1个标签，无需支持滚动，替换滚动物理特性避免无效的滚动位置计算：

body: TabBarView(
  physics: NeverScrollableScrollPhysics(),
  children: const [
    NutritionalValueView(),
  ],
),

方案3：升级Flutter版本

该问题是Flutter 3.22.x在Web端的已知框架bug，升级到3.24或更高版本可直接修复。

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