Flutter为AppBar添加底部TabBar时报No TabController for TabBar错误

错误原因 #

TabBar 工作必须依赖 TabController 协调状态，你的代码既没有给 TabBar 传入显式的 controller 参数，也没有在 TabBar 上层嵌套 DefaultTabController 提供默认控制器，所以触发了框架断言异常。

修复方案（最简实现） #

直接在当前 Scaffold 外层嵌套 DefaultTabController 即可，同时调整 TabBar 文字样式实现选中高亮、替换 body 为 TabBarView 实现页面切换，修改后的完整代码如下：

import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:movie_app/view/now_playing_movie.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:movie_app/view/now_playing_tv.dart';
import 'package:movie_app/view/top_movies.dart';
import 'package:movie_app/view/top_tvs.dart';
import '../style/style.dart';

class HomePageMovie extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePageMovie> {
  @override
  Widget build(BuildContext context) {
    // 外层嵌套DefaultTabController，指定Tab数量为2
    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Scaffold(
        backgroundColor: Color(0xFF151C26),
        appBar: AppBar(
          backgroundColor: Color(0xFF151C26),
          title: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SvgPicture.asset(
                logo,
                height: 195,
              ),
            ],
          ),
          actions: <Widget>[
            IconButton(
                onPressed: () {},
                icon: Icon(
                  EvaIcons.searchOutline,
                  color: Colors.white,
                ))
          ],
          bottom: TabBar(
              indicatorColor: Color(0xFFf4C10F),
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorWeight: 3.0,
              unselectedLabelColor: Colors.white,
              // 修改选中项文字/图标颜色为高亮黄色
              labelColor: Color(0xFFf4C10F),
              isScrollable: true,
              tabs: [
                Tab(
                  icon: Icon(Icons.movie),
                  text: "Movies",
                ),
                Tab(
                  icon: Icon(Icons.tv),
                  text: "TV Shows",
                )
              ]),
          titleSpacing: 0.0,
        ),
        // 替换body为TabBarView，对应两个分类的页面内容
        body: TabBarView(
          children: [
            // 电影分类页面
            ListView(
              children: <Widget>[
                NowPlayingMovies(),
                BestMovie(),
              ],
            ),
            // 电视节目分类页面，按需替换为你的实际页面组件
            ListView(
              children: <Widget>[
                NowPlayingTv(),
                TopTvs(),
              ],
            )
          ],
        ),
      ),
    );
  }
}

可选方案（自定义TabController） #

如果需要监听Tab切换事件、手动控制Tab跳转，可以用自定义控制器的方式：

• 在State类混入 SingleTickerProviderStateMixin
• 声明late TabController _tabController;
• 在initState中初始化：_tabController = TabController(length: 2, vsync: this);
• 在dispose中销毁：_tabController.dispose();
• 给TabBar和TabBarView都传入controller: _tabController参数即可。

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