Flutter 必備開源項目

時間 2019-12-08

標籤 flutter 必備開源項目简体版

原文原文鏈接

Flutter是Google推出的一套開源跨平臺UI框架，能夠快速地在Android、iOS和Web平臺上構建高質量的原生用戶界面。同時，Flutter仍是Google新研發的Fuchsia操做系統的默認開發套件。在全世界，Flutter正在被愈來愈多的開發者和組織使用，而且Flutter是徹底免費、開源的。css

做爲目前最流行的跨平臺技術框架，Flutter受到被愈來愈多的開發者和組織追捧，截止2019年11月，Flutter已得到超過80K的關注和10k的fork量。因此，把Flutter說成是2019年最火熱的前端技術也不過度。html

和其餘前端技術同樣，Flutter技術之因此火熱是由於完善的社區和開發者的熱情，因此在開發Flutter應用時咱們或多或少的會使用一些開源的社區庫，來減小咱們本身封裝帶來的時間成本，下面就Flutter開發中使用得比較多的庫給你們作一個總結（排名不分前後）。前端

和前端的包管理機制相似，Flutter的依賴包放在pubspec.yaml文件中，以下所示。android

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節點下面。ios

UI展現

富文本

flutter_html_view

pub.dartlang.org/packages/fl… 默認狀況下，Flutter是沒有提供顯示Html的組件的，因此若是要顯示Html，須要使用三方的包，這個包能夠將html呈現給原生的Widget。相似於Android的jsoup插件。git

flutter_html_textview

pub.dartlang.org/packages/fl… 將html呈現爲一個Widget，在textview中呈現html。github

MarkDown

flutter_markdown

pub.dartlang.org/packages/ma…算法

使用Dart編寫的支持Markdown查看的庫，它能夠在客戶端和服務器上將Markdown解析爲HTML。數據庫

markdown

pub.dartlang.org/packages/ma… 用Dart編寫的便攜式Markdown庫。它能夠在客戶端和服務器上將Markdown解析爲HTML。json

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加密解密算法的庫。

數據庫

若是有涉及到數據存儲、緩存相關的需求，可使用以下的第三方庫。

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權限申請的庫。

分享統計支付

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，提供更好更方便的駕車體驗Σ(￣。￣ﾉ)ﾉ。