flutter_tiktok

A flutter app that imitates vibrato. Mainly realized the function of watching video

Implement function

Swipe the video up and down, the video will automatically load the cover
Swipe left and right to search and personal center
Double click to love and like
See comments
Switch bottom Tabbar

Application screenshot

detail

Adapted to different screen ratios, on a slender screen, the bottom tabbar will not be superimposed on the video:

The picture shows the effect of forced adjustment under debug, the App will automatically judge according to the current screen ratio of the phone

Project structure

rely:

  # Loading animation libraries (like after revision no uses) 
  flutter_spinkit : ^ 4.1.2 
  # bilibili open source video playback component 
  fijkplayer : ^ 0.8.3 
  # -based transparent effects animation Click 
  tapped : the any 
  # the Map security value 
  safemap : the any

Main documents:

./lib
├── main.dart
├── mock
└── video.dart │ # false data
├── other
└── bottomSheet.dart │ # modify the height of the system BottomSheet
├── pages
├── cameraPage.dart │ # shoot-page (not the actual function) 
│ ├── followPage.dart   # slightly 
│ ├── homePage.dart # main page, containing the actual application functions tikTokScaffold of 
│ ├── msgDetailListPage.dart # slightly 
│ ├── msgPage.dart #略 
│ ├── searchPage.dart #略 
│ ├── todoPage.dart #略 
│ ├── userDetailPage.dart #略 
│ ├── userPage.dart #略 
│ └── walletPage .d #略
├── style
├── style.dart │ # global text size and color 
│ └── text.dart # several major text style
└── views
    ├── backButton.dart # iOS-shaped back button component 
    ├── loadingButton.dart # can be set to load style button component 
    ├── selectText.dart # can be set to "selected" or "unselected" style text 
    tikTokCommentBottomSheet.dart ├── # imitation Tiktok styles reviews 
    ├── tikTokHeader.dart # top imitation Tiktok switch assembly 
    ├── tikTokScaffold.dart # imitation Tiktok scaffolding core, encapsulating the gesture and switching functions, UI content itself does not contain 
    ├─ tikTokVideo.dart ─ # imitation Tiktok video UI style package, does not include a video player 
    ├── tikTokVideoButtonColumn.dart # assembly imitation Tiktok right of the video picture with a point button columns like other 
    ├── tikTokVideoGesture.dart # imitation double click Tiktok Like effect 
    ├── tikTokVideoPlayer.dart# Play page with the controlled slide VideoListController 
    ├── tiktokTabBar.dart # bottom Tabbar components of imitation Tiktok 
    ├── tilTokAppBar.dart # appbar components of imitation Tiktok 
    ├── topToolRow.dart # top of the page state of the user, Hide the Back button to switch to the user when the tab page 
    └── userMsgRow.dart # a component style user information

Thanks

The left and right swipe gesture code comes from the package of the author of the project https://github.com/ditclear/tiktok_gestures , thank you.

Invite me to drink coffee

I believe that the code of this project will definitely help you in commercial projects. If you benefit from this project, you may wish to ask the author to have a cup of coffee: