Flutter完整开发实战详解(二、 快速开发实战篇) | 掘金技术征文

 作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的 Flutter 应用。

 友情提示：本文所有代码均在 GSYGithubAppFlutter ，文中示例代码均可在其中找到，看完本篇相信你应该可以轻松完成如下效果。相关基础还请看篇章一。

前言

 本篇内容结构如下图，主要分为： 基础控件、数据模块、其他功能 三部分。每大块中的小模块，除了涉及的功能实现外，对于实现过程中笔者遇到的问题，会一并展开阐述。本系列的最终目的是： 让你感受 Flutter 的愉悦！ 那么就让我们愉悦的往下开始吧！(◐‿◑)

一、基础控件

 所谓的基础，大概就是砍柴功了吧！

1、Tabbar控件实现

 Tabbar 页面是常有需求，而在Flutter中： Scaffold + AppBar + Tabbar + TabbarView是 Tabbar 页面的最简单实现，但在加上 AutomaticKeepAliveClientMixin 用于页面 keepAlive 之后，诸如#11895的问题便开始成为Crash的元凶。直到 flutter v0.5.7 sdk 版本修复后，问题依旧没有完全解决，所以无奈最终修改了实现方案。

 目前笔者是通过 Scaffold + Appbar + Tabbar + PageView 来组合实现效果，从而解决上述问题。因为该问题较为常见，所以目前已经单独实现了测试Demo，有兴趣的可以看看 TabBarWithPageView。

 下面我们直接代码走起，首先作为一个Tabbar Widget，它肯定是一个 StatefulWidget ，所以我们先实现它的 State：

class _GSYTabBarState extends State with SingleTickerProviderStateMixin { ///···省略非关键代码 @override void initState() { super.initState(); ///初始化时创建控制器 ///通过 with SingleTickerProviderStateMixin 实现动画效果。 _tabController = new TabController(vsync: this, length: _tabItems.length); } @override void dispose() { ///页面销毁时，销毁控制器 _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { ///底部TAbBar模式 return new Scaffold( ///设置侧边滑出 drawer，不需要可以不设置 drawer: _drawer, ///设置悬浮按键，不需要可以不设置 floatingActionButton: _floatingActionButton, ///标题栏 appBar: new AppBar( backgroundColor: _backgroundColor, title: _title, ), ///页面主体，PageView，用于承载Tab对应的页面 body: new PageView( ///必须有的控制器，与tabBar的控制器同步 controller: _pageController, ///每一个 tab 对应的页面主体，是一个List children: _tabViews, onPageChanged: (index) { ///页面触摸作用滑动回调，用于同步tab选中状态 _tabController.animateTo(index); }, ), ///底部导航栏，也就是tab栏 bottomNavigationBar: new Material( color: _backgroundColor, ///tabBar控件 child: new TabBar( ///必须有的控制器，与pageView的控制器同步 controller: _tabController, ///每一个tab item，是一个List tabs: _tabItems, ///tab底部选中条颜色 indicatorColor: _indicatorColor, ), )); } }

 如上代码所示，这是一个 底部 TabBar 的页面的效果。TabBar 和 PageView 之间通过 _pageController 和 _tabController 实现 Tab 和页面的同步，通过 SingleTickerProviderStateMixin 实现 Tab 的动画切换效果 (ps 如果有需要多个嵌套动画效果，你可能需要TickerProviderStateMixin)。 从代码中我们可以看到：

• 手动左右滑动 PageView 时，通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。
• _tabItems 中，监听每个 TabBarItem 的点击，通过 _pageController 实现PageView的状态同步。

而上面代码还缺少了 TabBarItem 的点击，因为这块被放到了外部实现。当然你也可以直接在内部封装好控件，直接传递配置数据显示，这个可以根据个人需要封装。

外部调用代码如下：每个 Tabbar 点击时，通过pageController.jumpTo 跳转页面，每个页面需要跳转坐标为：当前屏幕大小乘以索引 index。

class _TabBarBottomPageWidgetState extends State { final PageController pageController = new PageController(); final List tab = ["动态