简介
本文大部分内容翻译自 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开发记录
详细全程和代码分析,请看我的个人博客