Flutter 通过 TabBar 及 TabBarView 实

如题，使用 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 ，这样可以设置图标和文本之间的间距