版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JerryWu145/article/details/87181573
如题，使用 Flutter 来实现题目效果要比 Android 原生实现简单一些
先上效果图
在实现之前，先看一下 Flutter 中 TabBar 及 TabBarView 的属性
TabBar
TabBarView
好了，现在我们开始吧
一、准备数据和图标
数据就是 String 类型的，而图标则是Widget，下文会用到~
二、通过 for 循环，将 TabBar 的 Tab 标签 List 准备好
三、定义一个 TabBar 控件，会在下一步引用到
四、用一个默认的 TabController 去将 上一步的 TabBar 包裹住，在这里，为了美观，我们将 TabBar 放置于 Scaffold 脚手架 下方
完工
需要注意的是，我们必须用TabController 将 TabBar 包裹，否则就会报出没有设定 TabController的错误
list1 是使用的 Tab 这个控件，这个控件可以方便的设置文本及图标，但是缺点是不能设置图标和文本之间的间距
list2 方式属于自定义 Tab ，这样可以设置图标和文本之间的间距
[源码地址 tag_1_use_icon](https://github.com/guaju/flutter_app_tabbar)