简介

本文大部分内容翻译自 Github 中 Awesome Flutter 项目，该项目集合了当下学习 Flutter 的优秀文章及开源项目，然而该项目对于所陈列的项目只有简单的分类，并没有做简要的说明。

当然如果看不了英文可以去看这篇翻译的文章，Awesome Flutter中文版 是由国内Coder翻译的，翻译质量不错，但仍缺少对文章内容的概括。

这篇文章的目的是想做一个简单的梳理，并对文章内容进行简化，整理成适合初学者。

手把手教你动手Flutter

如果你觉得自己对属于自己的 Flutter App 一筹莫展时，你可以看看其他人是怎么开发的App，一下这些 App 功能简单，但是对于初学者，手打出来是很有帮助的，建议大家在编译器好好敲一敲，体会一下：

• 开发一个安卓应用 —— 配置和开发第一个应用，作者是 Ashraff Hathibelagal。注意：采用的是IntelliJ IDEA，个别设置可能和 AS 不同，不过不影响程序的编写。这里并没有给出 Flutter 官方的教程，不知道为什么，可以通过第二篇跳转到官方给出的 Flutter 超级入门教学。
  难度：★
• Animated Chat —— 创建漂亮的 UI，来自谷歌代码实验室（Google Code Labs）。
  如果说第一个侧重于如何使用编译器编写运行Flutter App，那么这个则是将内容具体到对于布局和控件的使用。
  难度：★
• Firebase Chat —— Firebase integration，来自谷歌代码实验室。
  如果你想快速了解 Firebase 这个 Flutter 工具，那么这篇文章是你的入门之选，只需要你对面向对象语言有所掌握即可。
• 难度：★
• Planets-Flutter：从设计到开发 —— 详细的 planets design 教程。
  这是一个手把手教你做出好看应用的博客，设计到基础动画，页面跳转等知识，缺点是全英文，而且停更了
  难度：★~★★

个人博客

• Flutter Institute
  既含有手把手教你写 App 的教程，并且更新一些开发中会遇到的问题。还算不错
  难度：★~★★★
• Flutter by Example
  很推荐看的博客，里面涵盖了很多常用的控件工具库，例如网络库，动画库，登陆界面等等。强烈推荐！
  难度：★★

组件

示例

• 官方 Gallery —— 来自 Flutter 团队的展示 Material Design 风格的 Widget 和一些其他功能展示的示例 APP。
  对于一些新功能，基础控件，参考官方的写法可能是最简单直白的，缺点是官网没有讲解部分，但是很全！
  实用度：★★★★
• Flutter 示例（708 ★）—— 为 Flutter 开发者提供的一个简单基础的独立应用，作者是 Nishant Srivastava。
  类似于官方给出的，这两个结合观看基本上就可以设计出美观的 Flutter App 了
  实用度：★★★★

UI

这些 UI 设计是我挑出来比较实用的设计，其实都是很实用的，只不过对于我来说应用场景比较小，于是就落榜了。

• Contact Picker —— 从通讯录里选取一个联系人，作者是 Michael Goderbauer
• StaggeredGridView（115 ★）—— 具有不同尺寸磁贴（tile）的 GridView，作者是 Romain Rastel。
  实用度：★★★★
• Sticky Header (27 ★) - 长条式固定headers by Romain Rastel.
  实用度：★★★
• Sticky Headers (73 ★) - Configurable sticky headers by Simon Lightfoot.
  可以设置内容的固定headers。
  实用度：★★★
• 径向菜单（76 ★）—— 带动画的径向菜单，作者是 Victor Choueiri。
• Tinder 卡片（58 ★）—— Tinder like 卡片滑动效果，作者是 Ivascu Adrian。
  实用度：★★★
• Login Animation (119 ★) - 从登录平滑过渡到主页的动画 Ruchika Gupta.
  实用度：★★★★★
• List Drag&Drop (55 ★) - 表单内容拖拽by Norbert515.
  实用度：★★★★
• Calendar Widget (8 ★) - 按照时间顺序记录事件的 widget by David Bennett.
  实用度：★★
• Shimmer (55 ★) - Shimmer effect while content is loading by HungHD.
  给 widget 加波浪阴影特效
  实用度：★★★

图片

• Image Picker —— 图片选择器，作者是 Collin Jackson。
  很实用的库，用来选择照片库中的一个图片，或是自己拍一张。
  实用度：★★★★★
• Carousel Slider（42 ★）—— 旋转滑动小部件，支持无限滚动和自定义子部件，作者是 serenader。
  图片无限滑动
  实用度：★★★★
• Photo View (25 ★) - Scalable image view with loading placeholder by Renan C. Araújo.
  图片放缩、截图管理、照片Galaxy集合
  实用度：★★★

导航、路由

• Fluro（292 ★）—— 具有导航、通配符、查询、过渡动画的最亮、最时尚、最酷的 Flutter 路由器，作者是 Posse。
• Circle Indicator（12 ★）—— PageViewer 的圆形指示器，作者是 Lung Razvan。
• Quick Actions —— 与应用程序的主屏幕快速操作进行交互。
• Swiper (12 ★) - Horizontal, Vertical, Partial swipe with indicator by Xueliang Ren.

认证

• 本地身份验证 —— Ios 和 Android 上的 Touch ID、锁屏密码和指纹验证
• Flutter 登录（96 ★）—— FaceID, TouchID, 还有指纹扫描，作者是 Rody Davis。
• Google Sign-In —— Google 身份验证。
• Firebase Auth —— Firebase 身份验证。
• Facebook Login (62 ★) - Authenticate with native Android & iOS Facebook login SDKs by Iiro Krankka.
• Flutter OAuth（44 ★）—— Buffer、Strava、Unsplash 和 Github 身份验证，作者是 Joe Birch。
• Instagram —— Instagram 身份验证，作者是 Wilfried Mbouenda Mbogne。

文字和富文本

• Masked Text (6 ★) - Masked text with custom and monetary formatting by Ben-hur Santos Ott.
  给文本输入加上自定义mask，比如信息遮盖 * 、或者自动添加 - 。等

风格

• Flutterial（46 ★）—— Flutter Material 主题的探索者，作者是 Erick Ghaumez。
• Frosted Glass —— 渲染器效果，作者是 Collin Jackson。
• Font Awesome —— Font Awesome 图标包，作者是 Brian Egan。
• FlutterIcon —— 图标字体生成器。
• Pigment（27 ★）—— 简单但是很实用的在 Flutter 里面使用颜色的包。

多媒体

• 音频插件（95 ★）—— Beta 版，作者是 Erick Ghaumez。
• 录音机（24 ★）—— 录制音频并存储在本地，作者是 Jordan Alcaraz。
• Stereo（22 ★）—— 在 iOS 和 Android 上面播放音乐，作者是 2Find。
• WebRTC (80 ★) - WebRTC plugin for iOS/Android by CloudWebRtc.
• Chewie (70 ★) - Provides low-level access to video playback by Brian Egan.

语音

• Speech Recognition（41 ★）—— 语音转文字，作者是 Erick Ghaumez。
• OK Google —— 整合了 Google 语音助手，作者是 Marcin Szalek。

存储

• Firebase Storage —— 用 Firebase 作为数据存储设备。
• Secure Storage (23 ★) - Keychain and Keystore storage by German Saprykin.

模板

• Movie Details（93 ★）—— 电影详情页面，作者是 Iiro Krankka。
• Flutter Mates（160 ★）—— 如何从 randomuser.me API 加载个人信息列表，并通过一个漂亮的页面展示个人信息详情，作者是 Iiro Krankka。
• Weather（50 ★）—— 学习如何使用 Canvas 和动画去制作天气应用，作者是 Alessandro Aime。
• TodoMVC（644 ★）—— 准备使用不同框架的备忘录应用：Vanilla, Redux, built_redux，作者是 Brian Egan。
• Restaurant Menu（219 ★）—— 饭店菜单，作者是 Braulio Cassule。
• UI 挑战（222 ★）—— 个人信息应用、旅行应用、美食应用，作者是 Tomi Alagbe。
• Cupertino Settings（19 ★）—— iOS 设置，作者是 Matthias Rupp。
• Music Player（59 ★）—— 音乐播放器部件，作者是 Tobe O。
• Dashboard（142 ★）—— 仪表板和商品列表，作者是 Ivascu Adrian。
• Todo (94 ★) - Todo template from Dribble by Marc L.
• Card Swipe Animation (40 ★) - Swipe cards template by Ruchika Gupta.

插件

• Flutter 插件 —— Flutter 团队的官方插件
• Sqflite（221 ★）—— SQLite 的 Flutter 插件，作者是 Alexandre Roux。
• WebView（152 ★）—— 作者是 Hadrien Lejard。
• Pub Plugins —— Dart Pub Repository 的筛选插件。
• Flutter Location（79 ★）—— 处理位置，处理回调以获得连续的位置，作者是 Lyokone。
• QR Code Reader（32 ★）—— 二维码扫描插件，作者是 Matheus Villela。
• Battery —— 获取电池相关的各种信息。
• Zebra EMDK（3 ★）—— 使用 Zebra EMDK 来获取 Barcode Scanner API。
• Proximity Sensor Plugin —— 一个可以访问你设备上的距离传感器（proximity sensor）的插件，作者是 Manoj NB。
• Geolocation（72 ★）—— 功能齐全的地理位置插件：当前位置，位置更新，地理编码，地点等等，作者是 Loup。
• Local Notifications（62 ★）—— 展示本地通知的插件，作者是 Michael Bui。
• App Rating（20 ★）—— 为 App Store 和 Google Play 评分和写评论，作者是 Rody Davis。
• Get Version（13 ★）—— 获取版本名、版本号、App ID 和带有操作系统版本的平台信息，作者是 Rody Davis。
• Downloader (23 ★) - Create and manage download tasks by HungHD.
• Place Dialog (9 ★) - Places picker dialog returning the places to the app by David Bennett.
• Cached Network Image (61 ★) - Show images from the internet and keep them in the cache directory by Rene Floor.
• Device Calendar - Plugin for modifying calendars on the user's device by Built to Roam.

蓝牙 / NFC / Beacon

• Flutter Ble（45 ★）—— 蓝牙，作者是 Polidea
• Flutter Blue（142 ★）—— 蓝牙，作者是 Paul DeMarco。
• NFC (12 ★) - Connect IsoDep iso 14443-4 cards for android by Göksel Uyulmaz.
• Beacons (4 ★) - Flutter beacons plugin by Loup.

开源 APP

当学会了一些基础之后，可以去看看别人编写的 App 来提高自己对于 App 设计模式以及层级结构的理解，没有结构和层次的 App 是很糟糕的。

• FriendlyChat（106 ★）—— 一群谷歌员工开发的离线或者是基于 Firebase 的聊天应用。
• Meme Chat（244 ★）—— Flutter 上的聊天应用，用到了 Firebase、谷歌登陆和设备相机集成，作者是谷歌员工。
• Flitter（83 ★）—— Glitter 客户端，作者是 Hadrien Lejard 和 Kevin Segaud。里面用到了 Redux 和 Jaguar。
• Lime ——（129 ★）Lime 是 Sebastian Sellmair 开发的社交网络应用。
• Planets-Flutter（149 ★）—— 显示了丰富 UI 的行星探索应用，作者是 Sergi Martínez。
• NewsBuzz（175 ★）—— 从 News API 获取数据并使用 Firebase 做后台的新闻阅读器，作者是 Ankur Kedia。
• DroidKaigi2018-flutter（226 ★）—— 东京 DroidKaigi 2018 的非官方会议应用，作者是 konifar。
• Music Player（178 ★）—— Pawan Kumar 开发的全功能音乐播放器。
• InKino（820 ★）—— 完整的电影应用程序，使用 Flutter_Redux 框架进行状态管理，具有很好的过渡动画，以及一套很全面的小部件还有单元测试，作者是 Iiro Krankka。
• WhatTodo (105 ★) - Todoist like UI by Burhanuddin Rashid.
• FlutterGram (74 ★) - Complete Instagram based on Firestore & Google Functions by MDanics.
• BookSearch (97 ★) - Digital BookShelf for your reading progress by Norbert515.
• Cinematic (145 ★) - UI for Movie DB Public API by Aaron Oertel.
• Beer-Me-Up (75 ★) - Beer tracking nicely designed by Benoit Letondor.

以上这些开源代码质量都还是比较高的，大家可以有针对性地看其中的一两个。

更多Flutter App开发记录

详细全程和代码分析，请看我的个人博客