早上好，騷年，我是小 G，個人公衆號「菜鳥翻身」會推薦 GitHub 上有用的項目，一分鐘 get 一個優秀的開源項目，挖掘開源的價值，歡迎關注我。git
近年來，隨着移動智能設備的快速普及，移動多端統一開發框架已成爲一個熱門話題，這裏爲你整理了 4 個 Flutter 優質的開源項目，但願對你有幫助。github
Flutter 精仿抖音
Flutter 精仿抖音開源了，左滑搜索，右滑我的中心，上下滑動刷視頻，雙擊點贊冒愛心，無敵精仿，感謝點 Star。web
應用截圖
實現功能
- 上下刷視頻，視頻會自動加載封面
- 左右滑動去搜索與我的中心
- 雙擊冒愛心點贊
- 看評論
- 切換底部 Tabbar
項目結構
依賴：緩存
# 加載動畫庫(好像改版以後就沒用到了) flutter_spinkit: ^4.1.2 # Bilibili開源的視頻播放組件 fijkplayer: ^0.8.3 # 基礎的透明動畫點擊效果 tapped: any # map安全取值 safemap: any
主要文件：安全
./lib
├── main.dart
├── mock
│ └── video.dart # 假數據
├── other
│ └── bottomSheet.dart # 修改了系統BottomSheet的高度
├── pages
│ ├── cameraPage.dart # 拍攝頁（沒有實際功能）
│ ├── followPage.dart # 略
│ ├── homePage.dart # 主頁面，包含tikTokScaffold的實際應用功能
│ ├── msgDetailListPage.dart # 略
│ ├── msgPage.dart # 略
│ ├── searchPage.dart # 略
│ ├── todoPage.dart # 略
│ ├── userDetailPage.dart # 略
│ ├── userPage.dart # 略
│ └── walletPage.d # 略
├── style
│ ├── style.dart # 全局文字大小與顏色
│ └── text.dart # 主要的幾個文字樣式
└── views
├── backButton.dart # iOS形狀的返回按鈕組件
├── loadingButton.dart # 能夠設置爲載入樣式的按鈕組件
├── selectText.dart # 可設置爲「選中」或者「未選中」樣式的文字
├── tikTokCommentBottomSheet.dart # 仿Tiktok評論樣式
├── tikTokHeader.dart # 仿Tiktok頂部切換組件
├── tikTokScaffold.dart # 仿Tiktok核心腳手架，封裝了手勢與切換等功能，自己不包含UI內容
├── tikTokVideo.dart # 仿Tiktok的視頻UI樣式封裝，不包含視頻播放
├── tikTokVideoButtonColumn.dart # 仿Tiktok視頻右側的頭像與點贊等按鈕列的組件
├── tikTokVideoGesture.dart # 仿Tiktok的雙擊點贊效果
├── tikTokVideoPlayer.dart # 視頻播放頁面，帶有控制滑動的VideoListController類
├── tiktokTabBar.dart # 仿Tiktok的底部Tabbar組件
├── tilTokAppBar.dart # 仿Tiktok的Appbar組件
├── topToolRow.dart # 用戶頁面的頂部狀態，在tab切換到user頁面時隱藏返回按鈕
└── userMsgRow.dart # 一條用戶信息的樣式組件
項目地址
https://github.com/mjl0602/flutter_tiktokapp
Flutter 鬥魚 APP
應用截圖
主要涵蓋功能
- 滑動狀態導航、輪播圖
- 移動端 px 兼容
- 封裝 HTTP、IO 緩存操做
- 頁面路由傳值
- bloc 全局狀態管理
- 禮物橫幅動畫隊列
- 彈幕消息滾動
- 接入靜態視頻流
- 九宮格抽獎遊戲
- 照片選擇
- webView 容器
項目地址
https://github.com/yukilzw/dy_flutter框架
Flutter 豆瓣客戶端
應用截圖
功能介紹
首頁 pages/home
homo_app_bar.dart 首頁導航頭 home_page.dart 首頁 my_home_tab_bar.dart 首頁 tabide
書影音 pages/movie
book_audio_video_page.dart 書影音頁面 detail_page.dart 影片、電視詳情頁面 person_detail_page.dart 演員頁面介紹動畫
小組 pages/group
市集 shop_page.dart
市集的數據使用兩個 webviewcode
個人 page/person
項目地址
https://github.com/kaina404/FlutterDouBan
Flutter 開源中國客戶端
基於 Google Flutter 的開源中國客戶端，支持 Android 和 iOS。
應用截圖
iOS
Android
功能
- 登陸（使用 osc 帳號）
- 查看資訊（未登陸便可查看）
- 查看、回覆、發表、評論動彈（須要登陸）
- 動彈小黑屋（須要登陸）
- 「發現」部分的功能基本上都是用 H5 實現