简介

本文大部分内容翻译自 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 设计是我挑出来比较实用的设计,其实都是很实用的,只不过对于我来说应用场景比较小,于是就落榜了。

图片

  • 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.

认证

文字和富文本

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

风格

多媒体

语音

存储

模板

插件

蓝牙 / NFC / Beacon

开源 APP

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

  • FriendlyChat(106 ★)—— 一群谷歌员工开发的离线或者是基于 Firebase 的聊天应用。
  • Meme Chat(244 ★)—— Flutter 上的聊天应用,用到了 Firebase、谷歌登陆和设备相机集成,作者是谷歌员工。
  • Flitter(83 ★)—— Glitter 客户端,作者是 Hadrien LejardKevin 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.

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