簡介

本文大部分內(nèi)容翻譯自 Github 中 Awesome Flutter 項(xiàng)目，該項(xiàng)目集合了當(dāng)下學(xué)習(xí) Flutter 的優(yōu)秀文章及開源項(xiàng)目，然而該項(xiàng)目對(duì)于所陳列的項(xiàng)目只有簡單的分類，并沒有做簡要的說明。

當(dāng)然如果看不了英文可以去看這篇翻譯的文章，Awesome Flutter中文版 是由國內(nèi)Coder翻譯的，翻譯質(zhì)量不錯(cuò)，但仍缺少對(duì)文章內(nèi)容的概括。

這篇文章的目的是想做一個(gè)簡單的梳理，并對(duì)文章內(nèi)容進(jìn)行簡化，整理成適合初學(xué)者。

手把手教你動(dòng)手Flutter

如果你覺得自己對(duì)屬于自己的 Flutter App 一籌莫展時(shí)，你可以看看其他人是怎么開發(fā)的App，一下這些 App 功能簡單，但是對(duì)于初學(xué)者，手打出來是很有幫助的，建議大家在編譯器好好敲一敲，體會(huì)一下：

• 開發(fā)一個(gè)安卓應(yīng)用 —— 配置和開發(fā)第一個(gè)應(yīng)用，作者是 Ashraff Hathibelagal。注意：采用的是IntelliJ IDEA，個(gè)別設(shè)置可能和 AS 不同，不過不影響程序的編寫。這里并沒有給出 Flutter 官方的教程，不知道為什么，可以通過第二篇跳轉(zhuǎn)到官方給出的 Flutter 超級(jí)入門教學(xué)。
  難度：★
• Animated Chat —— 創(chuàng)建漂亮的 UI，來自谷歌代碼實(shí)驗(yàn)室（Google Code Labs）。
  如果說第一個(gè)側(cè)重于如何使用編譯器編寫運(yùn)行Flutter App，那么這個(gè)則是將內(nèi)容具體到對(duì)于布局和控件的使用。
  難度：★
• Firebase Chat —— Firebase integration，來自谷歌代碼實(shí)驗(yàn)室。
  如果你想快速了解 Firebase 這個(gè) Flutter 工具，那么這篇文章是你的入門之選，只需要你對(duì)面向?qū)ο笳Z言有所掌握即可。
• 難度：★
• Planets-Flutter：從設(shè)計(jì)到開發(fā) —— 詳細(xì)的 planets design 教程。
  這是一個(gè)手把手教你做出好看應(yīng)用的博客，設(shè)計(jì)到基礎(chǔ)動(dòng)畫，頁面跳轉(zhuǎn)等知識(shí)，缺點(diǎn)是全英文，而且停更了
  難度：★~★★

個(gè)人博客

• Flutter Institute
  既含有手把手教你寫 App 的教程，并且更新一些開發(fā)中會(huì)遇到的問題。還算不錯(cuò)
  難度：★~★★★
• Flutter by Example
  很推薦看的博客，里面涵蓋了很多常用的控件工具庫，例如網(wǎng)絡(luò)庫，動(dòng)畫庫，登陸界面等等。強(qiáng)烈推薦！
  難度：★★

組件

示例

• 官方 Gallery —— 來自 Flutter 團(tuán)隊(duì)的展示 Material Design 風(fēng)格的 Widget 和一些其他功能展示的示例 APP。
  對(duì)于一些新功能，基礎(chǔ)控件，參考官方的寫法可能是最簡單直白的，缺點(diǎn)是官網(wǎng)沒有講解部分，但是很全！
  實(shí)用度：★★★★
• Flutter 示例（708 ★）—— 為 Flutter 開發(fā)者提供的一個(gè)簡單基礎(chǔ)的獨(dú)立應(yīng)用，作者是 Nishant Srivastava。
  類似于官方給出的，這兩個(gè)結(jié)合觀看基本上就可以設(shè)計(jì)出美觀的 Flutter App 了
  實(shí)用度：★★★★

UI

這些 UI 設(shè)計(jì)是我挑出來比較實(shí)用的設(shè)計(jì)，其實(shí)都是很實(shí)用的，只不過對(duì)于我來說應(yīng)用場(chǎng)景比較小，于是就落榜了。

• Contact Picker —— 從通訊錄里選取一個(gè)聯(lián)系人，作者是 Michael Goderbauer
• StaggeredGridView（115 ★）—— 具有不同尺寸磁貼（tile）的 GridView，作者是 Romain Rastel。
  實(shí)用度：★★★★
• Sticky Header (27 ★) - 長條式固定headers by Romain Rastel.
  實(shí)用度：★★★
• Sticky Headers (73 ★) - Configurable sticky headers by Simon Lightfoot.
  可以設(shè)置內(nèi)容的固定headers。
  實(shí)用度：★★★
• 徑向菜單（76 ★）—— 帶動(dòng)畫的徑向菜單，作者是 Victor Choueiri。
• Tinder 卡片（58 ★）—— Tinder like 卡片滑動(dòng)效果，作者是 Ivascu Adrian。
  實(shí)用度：★★★
• Login Animation (119 ★) - 從登錄平滑過渡到主頁的動(dòng)畫 Ruchika Gupta.
  實(shí)用度：★★★★★
• List Drag&Drop (55 ★) - 表單內(nèi)容拖拽by Norbert515.
  實(shí)用度：★★★★
• Calendar Widget (8 ★) - 按照時(shí)間順序記錄事件的 widget by David Bennett.
  實(shí)用度：★★
• Shimmer (55 ★) - Shimmer effect while content is loading by HungHD.
  給 widget 加波浪陰影特效
  實(shí)用度：★★★

圖片

• Image Picker —— 圖片選擇器，作者是 Collin Jackson。
  很實(shí)用的庫，用來選擇照片庫中的一個(gè)圖片，或是自己拍一張。
  實(shí)用度：★★★★★
• Carousel Slider（42 ★）—— 旋轉(zhuǎn)滑動(dòng)小部件，支持無限滾動(dòng)和自定義子部件，作者是 serenader。
  圖片無限滑動(dòng)
  實(shí)用度：★★★★
• Photo View (25 ★) - Scalable image view with loading placeholder by Renan C. Araújo.
  圖片放縮、截圖管理、照片Galaxy集合
  實(shí)用度：★★★

導(dǎo)航、路由

• Fluro（292 ★）—— 具有導(dǎo)航、通配符、查詢、過渡動(dòng)畫的最亮、最時(shí)尚、最酷的 Flutter 路由器，作者是 Posse。
• Circle Indicator（12 ★）—— PageViewer 的圓形指示器，作者是 Lung Razvan。
• Quick Actions —— 與應(yīng)用程序的主屏幕快速操作進(jìn)行交互。
• Swiper (12 ★) - Horizontal, Vertical, Partial swipe with indicator by Xueliang Ren.

認(rèn)證

• 本地身份驗(yàn)證 —— Ios 和 Android 上的 Touch ID、鎖屏密碼和指紋驗(yàn)證
• Flutter 登錄（96 ★）—— FaceID, TouchID, 還有指紋掃描，作者是 Rody Davis。
• Google Sign-In —— Google 身份驗(yàn)證。
• Firebase Auth —— Firebase 身份驗(yàn)證。
• Facebook Login (62 ★) - Authenticate with native Android & iOS Facebook login SDKs by Iiro Krankka.
• Flutter OAuth（44 ★）—— Buffer、Strava、Unsplash 和 Github 身份驗(yàn)證，作者是 Joe Birch。
• Instagram —— Instagram 身份驗(yàn)證，作者是 Wilfried Mbouenda Mbogne。

文字和富文本

• Masked Text (6 ★) - Masked text with custom and monetary formatting by Ben-hur Santos Ott.
  給文本輸入加上自定義mask，比如信息遮蓋 * 、或者自動(dòng)添加 - 。等

風(fēng)格

• Flutterial（46 ★）—— Flutter Material 主題的探索者，作者是 Erick Ghaumez。
• Frosted Glass —— 渲染器效果，作者是 Collin Jackson。
• Font Awesome —— Font Awesome 圖標(biāo)包，作者是 Brian Egan。
• FlutterIcon —— 圖標(biāo)字體生成器。
• Pigment（27 ★）—— 簡單但是很實(shí)用的在 Flutter 里面使用顏色的包。

多媒體

• 音頻插件（95 ★）—— Beta 版，作者是 Erick Ghaumez。
• 錄音機(jī)（24 ★）—— 錄制音頻并存儲(chǔ)在本地，作者是 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 ★）—— 語音轉(zhuǎn)文字，作者是 Erick Ghaumez。
• OK Google —— 整合了 Google 語音助手，作者是 Marcin Szalek。

存儲(chǔ)

• Firebase Storage —— 用 Firebase 作為數(shù)據(jù)存儲(chǔ)設(shè)備。
• Secure Storage (23 ★) - Keychain and Keystore storage by German Saprykin.

模板

• Movie Details（93 ★）—— 電影詳情頁面，作者是 Iiro Krankka。
• Flutter Mates（160 ★）—— 如何從 randomuser.me API 加載個(gè)人信息列表，并通過一個(gè)漂亮的頁面展示個(gè)人信息詳情，作者是 Iiro Krankka。
• Weather（50 ★）—— 學(xué)習(xí)如何使用 Canvas 和動(dòng)畫去制作天氣應(yīng)用，作者是 Alessandro Aime。
• TodoMVC（644 ★）—— 準(zhǔn)備使用不同框架的備忘錄應(yīng)用：Vanilla, Redux, built_redux，作者是 Brian Egan。
• Restaurant Menu（219 ★）—— 飯店菜單，作者是 Braulio Cassule。
• UI 挑戰(zhàn)（222 ★）—— 個(gè)人信息應(yīng)用、旅行應(yīng)用、美食應(yīng)用，作者是 Tomi Alagbe。
• Cupertino Settings（19 ★）—— iOS 設(shè)置，作者是 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 團(tuán)隊(duì)的官方插件
• Sqflite（221 ★）—— SQLite 的 Flutter 插件，作者是 Alexandre Roux。
• WebView（152 ★）—— 作者是 Hadrien Lejard。
• Pub Plugins —— Dart Pub Repository 的篩選插件。
• Flutter Location（79 ★）—— 處理位置，處理回調(diào)以獲得連續(xù)的位置，作者是 Lyokone。
• QR Code Reader（32 ★）—— 二維碼掃描插件，作者是 Matheus Villela。
• Battery —— 獲取電池相關(guān)的各種信息。
• Zebra EMDK（3 ★）—— 使用 Zebra EMDK 來獲取 Barcode Scanner API。
• Proximity Sensor Plugin —— 一個(gè)可以訪問你設(shè)備上的距離傳感器（proximity sensor）的插件，作者是 Manoj NB。
• Geolocation（72 ★）—— 功能齊全的地理位置插件：當(dāng)前位置，位置更新，地理編碼，地點(diǎn)等等，作者是 Loup。
• Local Notifications（62 ★）—— 展示本地通知的插件，作者是 Michael Bui。
• App Rating（20 ★）—— 為 App Store 和 Google Play 評(píng)分和寫評(píng)論，作者是 Rody Davis。
• Get Version（13 ★）—— 獲取版本名、版本號(hào)、App ID 和帶有操作系統(tǒng)版本的平臺(tái)信息，作者是 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.

藍(lán)牙 / NFC / Beacon

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

開源 APP

當(dāng)學(xué)會(huì)了一些基礎(chǔ)之后，可以去看看別人編寫的 App 來提高自己對(duì)于 App 設(shè)計(jì)模式以及層級(jí)結(jié)構(gòu)的理解，沒有結(jié)構(gòu)和層次的 App 是很糟糕的。

• FriendlyChat（106 ★）—— 一群谷歌員工開發(fā)的離線或者是基于 Firebase 的聊天應(yīng)用。
• Meme Chat（244 ★）—— Flutter 上的聊天應(yīng)用，用到了 Firebase、谷歌登陸和設(shè)備相機(jī)集成，作者是谷歌員工。
• Flitter（83 ★）—— Glitter 客戶端，作者是 Hadrien Lejard 和 Kevin Segaud。里面用到了 Redux 和 Jaguar。
• Lime ——（129 ★）Lime 是 Sebastian Sellmair 開發(fā)的社交網(wǎng)絡(luò)應(yīng)用。
• Planets-Flutter（149 ★）—— 顯示了豐富 UI 的行星探索應(yīng)用，作者是 Sergi Martínez。
• NewsBuzz（175 ★）—— 從 News API 獲取數(shù)據(jù)并使用 Firebase 做后臺(tái)的新聞閱讀器，作者是 Ankur Kedia。
• DroidKaigi2018-flutter（226 ★）—— 東京 DroidKaigi 2018 的非官方會(huì)議應(yīng)用，作者是 konifar。
• Music Player（178 ★）—— Pawan Kumar 開發(fā)的全功能音樂播放器。
• InKino（820 ★）—— 完整的電影應(yīng)用程序，使用 Flutter_Redux 框架進(jìn)行狀態(tài)管理，具有很好的過渡動(dòng)畫，以及一套很全面的小部件還有單元測(cè)試，作者是 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.

以上這些開源代碼質(zhì)量都還是比較高的，大家可以有針對(duì)性地看其中的一兩個(gè)。

更多Flutter App開發(fā)記錄

詳細(xì)全程和代碼分析，請(qǐng)看我的個(gè)人博客