flutter_mycommunity_app社交電商項(xiàng)目

這段時(shí)間內(nèi)一直學(xué)習(xí)Flutter, 自行設(shè)計(jì)完成了一個(gè)實(shí)戰(zhàn)開源社交電商項(xiàng)目

項(xiàng)目目前也還是處在開發(fā)待完成階段, 常用的功能搜索，聊天，回復(fù)評論這些都有了，二級商戶入駐還待開發(fā)中。

下面是一些UI界面展示和一些用到的組件

一些界面UI

項(xiàng)目里用到的Flutter 組件 

1、消息推送
flutter_apns

實(shí)現(xiàn)了apns和google fcm服務(wù)，用于ios系統(tǒng)和國外的android設(shè)備。國內(nèi)無法訪問google fcm服務(wù)器，因此需要集成各廠商推送，插件內(nèi)部實(shí)現(xiàn)了參數(shù)傳遞因此不需要再用uni_links。（需要上架ios申請相關(guān)證書99刀，F(xiàn)CM只要注冊就可以）

push_message_register

向華為、小米、vivo、oppo、魅族注冊當(dāng)前設(shè)備獲取token，當(dāng)設(shè)備離線時(shí)服務(wù)端通過token使用各自廠商通道發(fā)送消息，用戶點(diǎn)擊系統(tǒng)彈出的通知消息后會(huì)通過deeplink來打開App。（需要上架廠商應(yīng)用商店并注冊推送服務(wù)）

uni_links

監(jiān)聽外部deeplink，冷啟動(dòng)和后臺運(yùn)行均有效，當(dāng)獲取到新的deeplink通過識別參數(shù)來導(dǎo)航到指定頁面。

2、 IM聊天與網(wǎng)絡(luò)請求
dio

網(wǎng)絡(luò)請求用于請求服務(wù)端API返回?cái)?shù)據(jù)。

web_socket_channel

通過websocket協(xié)議與服務(wù)端保持長連接，用于即時(shí)聊天。

flutter_app_badger  

應(yīng)用圖標(biāo)上的小紅點(diǎn)顯示當(dāng)前未讀的消息數(shù)量，App在后臺運(yùn)行并保持websocket連接時(shí)能正常顯示（android可以加入白名單或申請產(chǎn)商常駐后臺不被系統(tǒng)強(qiáng)行結(jié)束還可以通過產(chǎn)商通道的消息透傳來接收消息，IOS系統(tǒng)可以通過apns來接收消息更新未讀消息），App進(jìn)程被用戶結(jié)束后無法更新，只能通過消息推送來提醒用戶。

badges

應(yīng)用里的小紅點(diǎn)，當(dāng)App在前臺運(yùn)行并收到新的消息時(shí)，通過使用小紅點(diǎn)提醒用戶有未讀新消息。

flutter_bloc

事件處理->狀態(tài)通知->UI刷新，1.websocket收到新消息后通過bloc處理  2.廣播處理的結(jié)果 3.通過bloc訂閱的頁面收到結(jié)果來刷新UI。（在消息聊天中有新消息到達(dá)時(shí)刷新UI界面顯示最新的消息，相對被動(dòng)的方式則需要間隔0.5秒左右刷新一次UI）

sqflite

本地?cái)?shù)據(jù)庫，將聊天列表、聊天消息、點(diǎn)贊、拉黑等存儲(chǔ)于本地?cái)?shù)據(jù)，如果本地有數(shù)據(jù)就可以不從服務(wù)器重新獲取。

extended_text_field、extended_text

Flutter Text組件plus，通過識別text中的文本來顯示自定義內(nèi)容（發(fā)送圖片[img:xxxxxxx.png] 通過識別文本內(nèi)容來顯示自定義ui）

3、 社交賬戶登錄、分享、支付
tobias

支付寶支付、授權(quán)登錄、綁定支付寶賬號、支付寶現(xiàn)金紅包（需要注冊支付寶企業(yè)賬戶）

fluwx

微信授權(quán)登錄、微信分享、分享后直接在微信里打開網(wǎng)頁、在微信網(wǎng)頁中打開App 需要注冊微信公眾號和微信開發(fā)平臺（注冊公眾號、開放平臺這兩個(gè)都需要認(rèn)證費(fèi)用總共600rmb）

sign_in_with_apple

用于apple 賬號登錄，在ios系統(tǒng)上如果集成了其他第三方社交賬號登錄那么也必須有apple賬號登錄。

4、 Html、驗(yàn)證、圖片上傳、語音錄制和播放、拍照、裁剪、刷新
flutter_html

識別字符串轉(zhuǎn)為html格式，如隱私協(xié)議，用戶協(xié)議。("<p>隱私協(xié)議</p>")

captcha

多種驗(yàn)證方式 拖動(dòng)圖片到指定位置、點(diǎn)擊圖片里的文字等等。

photo_manager

圖片選擇器，選擇圖片（項(xiàng)目內(nèi)圖片、語音存儲(chǔ)于阿里云oss，資源文件存儲(chǔ)于云可以使用云服務(wù)的cdn加速下載速度很快，國內(nèi)還有騰訊云，華為云等）

cached_network_image

下載并緩存圖片到本地存儲(chǔ)空間，經(jīng)常變更的圖片可以使用flutter自帶的組件來加載（下次啟動(dòng)或內(nèi)存占用過多時(shí)保存在內(nèi)存中的圖片會(huì)被自動(dòng)釋放）

flutter_sound

錄音和語音播放，配合audio_session插件可以暫停或激活其他音頻。

image_picker

拍照和選擇照片均能實(shí)現(xiàn)，但選擇照片還無法實(shí)現(xiàn)自定義UI

pull_to_refresh

下滑刷新和上滑加載更多

5、更新下載、定位、高德地圖
flutter_downloader

有新的升級時(shí)提醒用戶下載最新的更新包，App store禁止使用熱更新，android熱更新需要后臺下載so文件。

package_info_plus

App版本信息

amap_flutter_map、amap_flutter_location

高德定位和高德地圖（需要注冊高德地圖key）

url_launcher

打開外部App（打開地圖需要導(dǎo)航時(shí)，可以啟動(dòng)高德導(dǎo)航）

6、 其他常用組件
fluttertoast  

透明提醒框，在指定時(shí)間后消失

flutter_spinkit 

各種樣式的加載中動(dòng)態(tài)圖

shared_preferences

簡單數(shù)據(jù)的本地存儲(chǔ)（用戶登錄信息存儲(chǔ)等）

permission_handler

權(quán)限請求

flutter_swiper_null_safety

圖片滾動(dòng)播放