Flutter TabBar嵌入ExpansionPanel引发空指针异常问题

我之前也碰到过一模一样的问题，这个空指针异常的根源在于TabBar依赖Material组件提供的上下文环境，而ExpansionPanel的body区域默认并没有被Material组件包裹，导致Material.of(context)返回null，进而在执行color.value == Material.of(context).color.value时触发空指针。

具体解决方案： #

• 给你的BookTabs组件外层套一个Material组件，确保TabBar能获取到有效的Material上下文。
• 同时要确保TabController的初始化是正确的，在StatefulWidget的initState中创建，并在dispose中销毁，避免内存泄漏。

修改后的代码示例： #

假设你的BookTabs是一个StatefulWidget，那在调用它的地方（也就是expansion_panels_demo.dart的第251行）可以改成这样：

ExpansionPanel(
  headerBuilder: (context, isExpanded) {
    // 你的header代码
  },
  body: Material( // 新增Material包裹
    child: BookTabs(),
  ),
  isExpanded: // 你的展开状态判断
)

或者也可以在BookTabs内部的根节点添加Material：

class BookTabs extends StatefulWidget {
  @override
  _BookTabsState createState() => _BookTabsState();
}

class _BookTabsState extends State<BookTabs> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this); // 根据你的tab数量调整length
  }

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

  @override
  Widget build(BuildContext context) {
    return Material( // 内部添加Material
      child: Column(
        children: [
          TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                // 你的tab内容1
                Container(child: Text('Content 1')),
                // 你的tab内容2
                Container(child: Text('Content 2')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

额外注意点： #

• 一定要确保TabController的length和TabBar、TabBarView的子项数量一致，否则会触发另一个异常。
• 如果你的主题有自定义配置，也可以给Material指定color或者theme属性，确保和全局主题保持一致。

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