推薦4個Flutter重磅開源項目

Flutter 精仿抖音

Flutter 精仿抖音開源了，左滑搜索，右滑個人中心，上下滑動刷視頻，雙擊點贊冒愛心，無敵精仿，感謝點 Star。

應用截圖

實現功能

上下刷視頻，視頻會自動加載封面
左右滑動去搜索與個人中心
雙擊冒愛心點贊
看評論
切換底部 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 # 一條用戶信息的樣式組件