Flutter 必備開源專案

xiangzhihong 發表於 2019-12-02

Flutter是Google推出的一套開源跨平臺UI框架,可以快速地在Android、iOS和Web平臺上構建高質量的原生使用者介面。同時,Flutter還是Google新研發的Fuchsia作業系統的預設開發套件。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。

作為目前最流行的跨平臺技術框架,Flutter受到被越來越多的開發者和組織追捧,截止2019年11月,Flutter已獲得超過80K的關注和10k的fork量。所以,把Flutter說成是2019年最火熱的前端技術也不過分。

和其他前端技術一樣,Flutter技術之所以火熱是因為完善的社群和開發者的熱情,所以在開發Flutter應用時我們或多或少的會使用一些開源的社群庫,來減少我們自己封裝帶來的時間成本,下面就Flutter開發中使用得比較多的庫給大家做一個總結(排名不分先後)。

和前端的包管理機制類似,Flutter的依賴包放在pubspec.yaml檔案中,如下所示。

name: flutter_app
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  lpinyin: ^1.0.7

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

複製程式碼

其中,我們依賴的第三方庫就放在dependencies節點下面。

UI展示

富文字

flutter_html_view

pub.dartlang.org/packages/fl… 預設情況下,Flutter是沒有提供顯示Html的元件的,所以如果要顯示Html,需要使用三方的包,這個包可以將html呈現給原生的Widget。類似於Android的jsoup外掛。

flutter_html_textview

pub.dartlang.org/packages/fl… 將html呈現為一個Widget,在textview中呈現html。

MarkDown

flutter_markdown

pub.dartlang.org/packages/ma…

使用Dart編寫的支援Markdown檢視的庫,它可以在客戶端和伺服器上將Markdown解析為HTML。

markdown

pub.dartlang.org/packages/ma… 用Dart編寫的行動式Markdown庫。它可以在客戶端和伺服器上將Markdown解析為HTML。

html2md

pub.dartlang.org/packages/ht… 一個支援將html轉換為MarkDown的外掛。

動畫

flutter_villains

pub.dartlang.org/packages/fl… 一個頁面切換動畫的庫,可以簡化動畫操作,使用時只需要管理好UI即可。

螢幕適配

platform_aware

pub.dartlang.org/packages/pl… 為自動適應當前平臺而包裝的Flutter元件,不需要對iOS和Android進行程式碼更改。所有小部件都依賴於Theme.of(context).platform來確定當前活動平臺的平臺。你可以使用Flutter Inspector動態地更改平臺。

native_widgets

pub.dartlang.org/packages/na… 為避免重複程式碼,只編寫一次程式碼就可以支援兩個平臺並自動根據平臺自動使用對應風格元件,Android將使用材料設計,iOS將使用Cupertino風格的小部件。

日曆、時間選擇庫

flutter_calendar

pub.dartlang.org/packages/fl… Flutter的日曆元件庫,由於呼叫的是原生的元件庫,所以在顯示上略有差異。

calendarro

[https://pub.dartlang.org/packages/calendarro](https://pub.dartlang.org/packages/calendarro)
複製程式碼

Flutter的日曆元件庫, 這個庫提供了多種自定義元件的方法。

flutter_picker

pub.dartlang.org/packages/fl… 一個日期,時間,日期時間,icon,自定義資料的選擇器,可以居中彈窗,也可以在底部彈出。(目前來看是最全面的一個選擇器控制元件。該外掛支援ios和android平臺,使用的是ios的風格的UI效果。)

顏色選擇

flutter_color_picker

pub.dartlang.org/packages/fl… 一個簡單的顏色選擇器,類似於安卓的selector的功能,可以在點選控制元件時,給控制元件設定選擇器效果。

flutter_colorpicker

pub.dartlang.org/packages/fl… 一個HSV的顏色選擇器。

導航欄

navigation_bar

pub.dartlang.org/packages/na… 簡易的底部導航欄庫

fluro

pub.dartlang.org/packages/fl… 最好用的路由導航框架。功能:簡單的路線導航;函式處理程式(對映到函式而不是路徑);萬用字元引數匹配;查詢字串引數解析;內建常用轉換;簡單的定製轉換建立。

網路與資料序列化

網路請求

http

pub.dartlang.org/packages/ht… github.com/dart-lang/h… http是使用Dart原生編寫的網路請求庫,可以輕鬆的實現HTTP資源請求,並且它與平臺無關,可以在命令列和瀏覽器上使用。

HttpClient

HttpClient是Dart IO庫提供的一種Http請求,可以實現一些基本的Http請求。不過,HttpClient只能實現一些基本的網路請求,對應一些複雜的網路請求還無法完成,如POST裡的Body請求體傳輸內容型別部分還無法支援,multipart/form-data這個型別傳輸還不支援。

dio

pub.dartlang.org/packages/di…

Dart社群提供的http請求庫,不僅支援常見的網路請求,還支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、超時等操作。

http_multi_server

pub.dartlang.org/packages/ht…

HttpServer包裝器,可以用於處理來自多個伺服器請求。

ps: 關於網路庫的詳細使用,可以參考我之前文章的介紹:Flutter開發之Http網路請求

序列化

Flutter序列化可以分為手動序列化和使用工具序列化。手動序列化指的是使用 dart:convert 的內建解碼器,包括傳入 JSON 原始字串給 JSON.decode() 方法,然後從 Map<String, dynamic> 中查詢你需要的資料。自動序列化可以使用諸如json_serializable、built_value、built_value_generator和built_value_test庫。

除此之外,如果涉及到json解析,還可以使用codable庫,它可以將動態結構化資料(JSON,YAML)轉換為Dart型別的庫。以下是一些常用的json解析庫的比較。

在這裡插入圖片描述

編碼解碼

有時候為了資料的安全方面的考慮,會對傳輸的資料或本地儲存的資料進行編解碼、加密解密操作,如果有這方面的操作,可以使用下面的庫。

ninja

pub.dartlang.org/packages/ni… 在Dart的Converter和Codec介面上完善的AES以及RSA加密解密演算法的庫。

archive

pub.dartlang.org/packages/ar… 為各種存檔和壓縮格式提供編碼器和解碼器,如zip,tar,bzip2,gzip和zlib。

資料庫

如果有涉及到資料儲存、快取相關的需求,可以使用如下的第三方庫。

sqflite

pub.dartlang.org/packages/sq… SQLite的Flutter外掛,一個自包含的高可靠性嵌入式SQL資料庫引擎。

file_cache

pub.dartlang.org/packages/fi… 為flutter package專案快取Json、Buffer、FileCacheImage。

影象載入與加工

影象載入

在Flutter開發中,影象是一個重要的模組,主要是圖片的載入和圖片的處理。關於載入圖片,除了使用Image元件的Image.network 、 FadeInImage.memoryNetwork 來載入圖片外,還可以使用如下的一些圖片庫來載入圖片。

cached_network_image

pub.dartlang.org/packages/ca… 一個用於顯示來自Internet的影象並將它們儲存在快取目錄中的flutter庫,可以用來載入和快取網路影象,也可以與佔位符和錯誤小部件一起使用。

flutter_advanced_networkimage

pub.dartlang.org/packages/fl… 一個高階的影象快取載入和縮放控制的flutter庫。

transparent_image

pub.dartlang.org/packages/tr… 簡單的透明影象,表示為Uint8List,在載入圖片時可以用來做為佔位符。

影象處理

image_jpeg

pub.dartlang.org/packages/im… 用於將影象轉jpeg縮放壓縮,壓縮後再上傳圖片效率更高。該庫最終會呼叫Android或iOS原生功能進行圖片壓縮處理,效能較高,支援的源影象格式也很多。

image_picker

pub.dev/packages/im…

根據庫名就可以知道,image_picker是一個用於從Android和iOS影象庫中選擇影象的庫,支援使用相機拍攝新照片。

photo

pub.dartlang.org/packages/im… 此庫同樣可以用於選擇影象,支援多選,而且此庫是用Flutter做的UI,可以很方便的自定義修改顯示樣式。

image

pub.dartlang.org/packages/im…

Dart庫,提供以各種不同的檔案格式載入、儲存和操作影象的能力。該庫不需要依賴於DART:IO,因此它可以用於伺服器和Web應用程式。

flutter_svg

pub.dartlang.org/packages/fl… 可以使用此庫來載入svg影象。

zoomable_image

pub.dartlang.org/packages/zo… 一個支援影象檢視和手勢縮放操作功能的圖片庫。

image_carousel

pub.dartlang.org/packages/im… 一個用於Flutter影象展示的控制元件,與官方提供的Image元件相比,image_carousel支援左右划動來切換上一張下一張影象,並且image_carousel還結合了zoomable_image的功能,因此可以點選後縮放檢視圖片,除此之外,image_carousel還支援Asset和網路影象。

carousel_slider

pub.dartlang.org/packages/ca… 從名字就可以知道,carousel_slider是一個支援手勢划動的庫,使用此庫可以通過手勢划動來切換影象元件,並且此庫還支援自動播放影象。

parallax_image

pub.dartlang.org/packages/pa… 視差影象可以與任何可滾動(例如ListVIEW)一起使用,讓放在滾動區域內的影象滾動時看起來更平滑。

camera

pub.dartlang.org/packages/ca… 用於獲取Android和iOS系統相機的資訊,支援預覽相機饋送和捕捉影象,同時支援錄製視訊。

訊息通知

flutter_local_notifications

pub.dartlang.org/packages/fl… 一個可以跨平臺顯示本地notifications的外掛,支援android和iOS平臺。

local_notifications

pub.dartlang.org/packages/lo… 使用此庫可以在Android和iOS上很容易的建立Notifications通知。

url_launcher

pub.dartlang.org/packages/ur… 可以在Android和iOS上啟動URL,支援開啟網路、電話、簡訊和電子郵件等方案。

firebase_messaging

pub.dartlang.org/packages/fi… 一款跨平臺的訊息傳遞解決方案,可讓您在Android和iOS上可靠地傳遞訊息。

event_bus

pub.dartlang.org/packages/ev… 使用Dart流進行解耦應用程式的簡單事件匯流排的庫,和Android中的事件匯流排機制類似,內部使用了廣播機制。

視訊與音訊

在Flutter開發中,可能會涉及到視訊和音訊的播放開發, 除了使用Flutter提供的元件外,還可以使用一些開源的第三方庫。

video_player

pub.dartlang.org/packages/vi… 官方維護的視訊播放外掛,用於在Android和iOS上與其他Flutter視窗小部件一起顯示內嵌視訊。

video_launcher

pub.dartlang.org/packages/vi… 主要用於視訊播放器。

flute_music_player

pub.dartlang.org/packages/fl… 基於Flutter的音樂播放器與音訊外掛播放,支援本地音樂檔案播放。

audioplayer

pub.dartlang.org/packages/au… 一個播放遠端或本地音訊檔案Flutter音訊外掛。

audioplayers

pub.dartlang.org/packages/au… audioplayer的一個分支,不同之處在於它支援同時播放多個音訊並顯示音量控制。

其他

除此之外,如地圖、二維碼、圖表庫、許可權庫和分享等,也是平時開發中遇到比較多的需要。

地圖

map_view

pub.dartlang.org/packages/ma… 一個用於在iOS和Android上顯示谷歌地圖的Flutter外掛。

flutter_map

pub.dartlang.org/packages/fl… 基於leaflet的Flutter地圖包。

location

pub.dartlang.org/packages/lo… 處理Android和iOS上的位置,提供位置更改時的回撥。

latlong

pub.dartlang.org/packages/la… LatLong是一個計算通用的緯度和經度的輕量級庫。

二維碼

qr_flutter

pub.dartlang.org/packages/qr… qr_flutter是一個用於二維碼的Flutter庫,可通過Widget或自定義Paint進行簡單快速的QR碼渲染。

barcode_scan

pub.dartlang.org/packages/ba… barcode_scan是一個用於掃描2D條形碼和QRCodes的Flutter外掛。

qrcode_reader

pub.dartlang.org/packages/qr… qrcode_reader是一個使用相機讀取二維碼的Flutter外掛。

圖表庫

很多時候,圖表開發也是一個比較常見的開發需求,如果有圖表方面的開發需求,可以使用如下的開源庫。

charts-common

pub.dartlang.org/packages/ch… Material Design風格的圖表庫。

charts-flutter

pub.dartlang.org/packages/ch… 通用的圖表庫元件,提供基本的柱狀圖,折線圖,餅圖等。

flutter_circular_chart

pub.dartlang.org/packages/fl… 一個讓你使用flutter輕鬆建立的動畫圓形圖控制元件的庫。

許可權

在開發中,如果要向系統申請某個許可權,可以使用許可權庫去申請。

simple_permissions

pub.dartlang.org/packages/si… 一個用於android和ios的請求許可權的庫。

flutter_simple_permissions

pub.dartlang.org/packages/fl… Flutter許可權申請的庫。

分享統計支付

share

pub.dartlang.org/packages/sh… 支援分享的flutter外掛。

flutter_umeng_analytics

pub.dartlang.org/packages/fl… 友盟的分享和統計庫。

flutter_qq

pub.dartlang.org/packages/fl… 整合了QQ登入、QQ分享、QQ空間分享等功能的庫。

flutter_wechat

pub.dartlang.org/packages/fl… 整合了微信,支援微信登入、分享、支付等功能的庫。

flutter_alipay

pub.dartlang.org/packages/fl… 實現了呼叫支付寶進行支付的功能,相容android和iOS。

開源應用原始碼

學習一門技術,最有效的入門就是學習完基礎知識後,寫一個小的應用。作為今年最熱門的跨平臺技術(沒有之一),網路上出現了一大批開源的應用原始碼,通過閱讀這些原始碼,我們可以快速的深入Flutter應用開發。

flutter-go

github.com/alibaba/flu…

由阿里巴巴前端技術團隊開發的Flutter 開發者幫助 APP,包含 flutter 常用 140+ 元件的demo 演示與中文文件,是學習Flutter開發的必備手冊。

gsy_github_app_flutter

github.com/CarGuo/GSYG… GSYGithubApp系列的優勢:我們目前已經擁有Flutter、Weex、ReactNative、kotlin 四個版本。 功能齊全,專案框架內技術涉及面廣,完成度高,持續維護,配套文章,適合全面學習,對比參考。跨平臺的開源Github客戶端App,更好的體驗,更豐富的功能,旨在更好的日常管理和維護個人Github,提供更好更方便的駕車體驗Σ( ̄。 ̄ノ)ノ。

flutter-examples

github.com/nisrulz/flu…

包含Flutter的常見的學習示例。

flutter-osc

github.com/yubo725/flu…

基於Google Flutter的開源中國客戶端,支援Android和iOS。

FlutterDouBan

github.com/kaina404/Fl…

Flutter豆瓣客戶端,Awesome Flutter Project,全網最100%還原豆瓣客戶端。主要功能包括首頁、書影音、小組、市集及個人中心,一個不拉。

zhihu-flutter

github.com/xujiyou/zhi…

一個高仿知乎的Flutter應用,支援黑色主題切換。

flutter_shuqi

github.com/huanxsd/flu…

高仿書旗小說客戶端,所有功能都是用Dart寫的,iOS和Android的程式碼複用率達到了100%。

flutter-netease-music

github.com/boyan01/flu… 高仿網易雲音樂,完成大部分功能的高仿。

NeteaseCloudMusic

github.com/fluttercand…

高仿最新版的網易雲音樂,介面使用Binaryify大佬的 - NeteaseCloudMusicApi

Morec

github.com/Mayandev/mo…

這是一個非常精美的 Flutter 版電影客戶端,利用豆瓣現有的 Api,打造了一個完整的電影展示 App。細節十分完善,是一個經過完整設計的產品而非 Demo。

flutter_boss

github.com/heruijun/fl… 一個仿Boss直聘的Flutter應用。

awesome-flutter-cn

github.com/crazycodebo…

Flutter是Google出品的一款用於開發高效能、高保真、跨平臺App(Android iOS)的SDK。awesome-flutter-cn是Flutter的學習資料庫,初學者可以參考它進行學習。