效果图：

这里主要是用了TabController这个controller，而不是用的默认的DefaultTabController，TabBar跟TabBarView必须关联起来，否则会报错。我这个上面的代码改得还有点多，因为还加入了listview，各位看官就暂时凑合着看吧。

源码贴出来

源码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:guoding/api/data_utils.dart';
import 'package:guoding/model/topic_head_bean.dart';
import 'package:guoding/resources/my_dimens.dart';
import 'package:guoding/resources/mycolor_resources.dart';
import 'package:guoding/routers/application.dart';
import 'package:guoding/ui/home/top/topic_list_page.dart';
import 'package:guoding/widgets/my_tab_indicator.dart';

class MoreTopicPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MoreTopicPageState();
  }
}

class MoreTopicPageState extends State<MoreTopicPage>
    with TickerProviderStateMixin {
  bool hasTopLoad = false;

  List<TopicHeadLists> mTabs = new List();

  TabController _tabController;

  int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: mTabs.length, vsync: this);
    _tabController.addListener(() {
      setState(() => _selectedIndex = _tabController.index);
      print("liucheng-> ${_tabController.indexIsChanging}");
    });
    getTopicHorizatalData();
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: SafeArea(
        top: true,
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    GestureDetector(
                      onTap: () {
                        Application.router.pop(context);
                      },
                      child: Icon(
                        Icons.arrow_back_ios,
                        size: 20,
                        color: MyColorRes.tvMainSelectColor,
                      ),
                    ),
                    Text(
                      '话题列表',
                      style: TextStyle(
                          fontSize: 20, color: MyColorRes.tvMainSelectColor),
                    ),
                    Icon(
                      Icons.search,
                      size: 30,
                      color: MyColorRes.tvMainSelectColor,
                    ),
                  ],
                ),
                height: MyDimenRes.dp_title_height,
                margin: EdgeInsets.only(
                    left: MyDimenRes.dp_base_left,
                    right: MyDimenRes.dp_base_right,
                    ),
                alignment: Alignment.bottomCenter,
              ),
              Divider(color: MyColorRes.divideLine,),
              _buildRoot()
            ],
          ),
          color: MyColorRes.bg_white,
        ),
      ),
    );
  }

  Widget _buildRoot() {
    if (!hasTopLoad) {
      return Center(
        child: Text('加载中...'),
      );
    } else {
      return Container(
        color: MyColorRes.bgTagColor,
          height: MediaQuery.of(context).size.height-100,
        child: Column(
          children: <Widget>[
            Container(
              height: 46,
              child: TabBar(
                indicatorColor: MyColorRes.primaryColor,
                labelColor: MyColorRes.tvMainSelectColor,
                unselectedLabelColor: MyColorRes.tvMainUnSelectColor,
                unselectedLabelStyle: TextStyle(fontSize: 15),
                labelStyle: TextStyle(fontSize: 17),
                isScrollable: true,
                indicator: MyUnderlineTabIndicator(borderSide:  BorderSide(width: 2.0, color: MyColorRes.primaryColor)),
                controller: _tabController,
                tabs: mTabs.map((value) {
                  return Text(value.name);
                }).toList(),
              ),
              alignment: Alignment.centerLeft,
              color: MyColorRes.bg_white,
            ),
            Expanded(
              flex: 1,
              child: TabBarView(
                children: _buildPages(),
                controller: _tabController,
              ),
            ),
          ],
        ),
      );
    }
  }

  List<Widget> _buildPages() {
    List<Widget> pages = List();
    for (int i = 0; i < mTabs.length; i++) {
      Widget page = TopicListPage(mTabs[i].flId);
      pages.add(page);
    }
    return pages;
  }

  void getTopicHorizatalData() async {
    DataUtils.getTopicHorizatalists().then((value) {
      if (value != null) {
        var jsData = json.decode(value);
        int status = jsData['status'];
        var data = jsData['data'];
        TopicHeadBean headBean = TopicHeadBean.fromJson(jsonDecode(value));
        print('${headBean.data.lists}');
        mTabs.addAll(headBean.data.lists);
        if (mounted) {}

        setState(() {
          hasTopLoad = true;
          _tabController = new TabController(length: mTabs.length, vsync: this);
        });
      }
    }).catchError((e) {
      print('eee  getTopicHorizatalData  $e');
    });
  }

}

大神轻喷，本文参考掘金大神：https://blog.csdn.net/jlanglang/article/details/90547452

更多资源请访问：

超详细图文搭建个人免费博客

欢迎关注「蛇崽网盘教程资源」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。

在微信后台回复「130个小程序」，即可免费领取享有导入就能跑的微信小程序

在微信后台回复「Flutter移动电商」，即可免费领取Flutter移动电商系列全套