Flutter报错No TabController for ${widget.runtimeType}问题求助

错误原因 #

你已经为TabBar指定了自定义的TabController，但**TabBarView没有关联同一个控制器**，导致它无法找到对应的TabController，从而抛出错误。

修复方案 #

1. 给TabBarView添加controller: _controller参数，让它和TabBar使用同一个控制器
2. 重写dispose方法，在页面销毁时释放TabController，避免内存泄漏

修改后的完整代码：

class _homePageState extends State<homePage>
    with SingleTickerProviderStateMixin {
  late TabController _controller;
  static const List<Widget> _tabs = [
    Tab(
      icon: Icon(Icons.home),
    ),
    Tab(
      icon: Icon(Icons.tv),
    ),
    Tab(
      icon: Icon(Icons.supervised_user_circle),
    )
  ];

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 3, vsync: this, initialIndex: 0);
    _controller.animateTo(2);
  }

  // 新增：释放控制器
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("title"),
          actions: [
            InkWell(
              child: Padding(
                padding: EdgeInsets.all(8),
                child: Icon(Icons.search),
              ),
              onTap: () {},
            ),
            Padding(
              padding: EdgeInsets.all(8),
              child: Icon(Icons.messenger),
            ),
          ],
          bottom: TabBar(controller: _controller, tabs: _tabs),
        ),
        // 给TabBarView添加controller参数
        body: TabBarView(
          controller: _controller,
          children: [Text("data"), Text("list"), Text("list")],
        ));
  }
}

额外说明 #

如果不想手动管理TabController，也可以使用DefaultTabController包裹整个Scaffold，这样TabBar和TabBarView会自动共享控制器，示例代码：

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 3,
    initialIndex: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text("title"),
        actions: [
          InkWell(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Icon(Icons.search),
            ),
            onTap: () {},
          ),
          Padding(
            padding: EdgeInsets.all(8),
            child: Icon(Icons.messenger),
          ),
        ],
        bottom: TabBar(tabs: _tabs),
      ),
      body: TabBarView(
        children: [Text("data"), Text("list"), Text("list")],
      ),
    ),
  );
}

这种方式不需要手动创建和销毁TabController，适合简单的Tab场景。

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