100 行代码实现 Flutter 自定义 TabBar

Flutter 的确很强大，但美中不足的是生态还有待完善，没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库。

由此带来的直接影响是开发效率提不上去，需要耗费大量的时间精力在基础组件的封装上。

官方的 TabBar 不满足需求，又没有合适的轮子，只好自己造轮子啦。接下来带你一步步实现自定义 TabBar……

一、目标和效果

需求目标是：

1. 这个页面不要 material 左侧统一的返回键和 Title
2. 在右侧有取消按钮，点取消即返回
3. 点击 Tab 可以实现 content 切换并带有动画效果
4. 滑动内容区域也可以切换 Tab

效果如下图：

二、实现思路

将整个页面分为两部分，上面的 Tab 按钮和下面的内容区域。

为了保持通用性，上面的 Tab 和下面的内容区域都需要让调用者传入，它们都是 Widget 数组

class STab extends StatefulWidget {
  // tab 集合
  final List<Widget> tabs;
  // 页面集合
  final List<Widget> pages;

  STab({this.tabs, this.pages});

  @override
  _STabState