• Stars
    star
    724
  • Rank 62,593 (Top 2 %)
  • Language
    Dart
  • Created almost 6 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

flutter 视频类客户端

Vistor-Flutter 视频类 App

博客链接:https://songlcy.blog.csdn.net/article/details/86621278

链接下载Apk安装

https://www.pgyer.com/poE0

【注】如果安装apk后,启动发生闪退现象,原因是由于手机 ARM 处理器兼容问题。一般会发生在新款三星、华为等第8代处理器手机,此时可以找到 app/build.gradle 文件,手动修改如下代码:

 // "arm64-v8a"为8代处理器,一般为三星,华为新手机出现。
 ndk {
   abiFilters "armeabi-v7a", "armeabi", "arm64-v8a"
 }

模块

1.开发环境:

  Vs Code (1.30.2)
  Android Studio 3.+

2.开发框架 ( Flutter sdk: ">=2.0.0-dev.68.0 <3.0.0" ):

  状态管理:Scoped_model
  网络层:Dio
  导航库:Fluro

3.主模块分为首页、精选、电影、我的,以下是功能列表:

  使用 scoped_model 状态管理,实现state统一管理。
  使用 TabBar + TabBarView 实现单页面不同模块切换。
  使用 staggered_grid_view、ListView 组件展示图文列表。
  扩展列表组件,结合 NotificationManager 实现上拉加载更多数据,下拉刷新数据。
  精选内容,分类展示,使用SliverAppBar,增加交互动效,提高用户体验。
  自定义过滤菜单组件,结合 ScrollController 实现滑动交互效果。
  代码模块化  实现,组件封装实现代码复用。

功能设计

  1. 使用 Fluro 管理全局路由,可自由配置 Scene 的转场动画,处理Android端的后退键事件
  2. 使用 Flutter 基本语法进行布局,并封装了一系列通用的组件,比如 AnimationText、过滤菜单,加载状态组件,共享动画组件等,便于全局复用
  3. 数据层使用Dio实现 Http / Https 网络加载,可轻松实现 http header、链接超时等常用配置。
  4. 使用 CachedImage 组件,实现图片的加载缓存,优化渲染显示性能。
  5. 引入 scoped_model 状态管理,Scoped 结合 ScopedModelDescendant ,设定全局 state 结构,管理相关的组件状态。
  6. 使用 shared_preferences 实现小数据的本地化存储。
  7. 使用第三方字体库,实现 FontFamily 的定制显示。
  8. 设置 WillPopScope,实现首页点击返回键提示两次快按退出功能。
  9. 首页非Index Tab 页面下,点击返回键,首先返回 Index Tab,再次点击提示两次退出。
  ....

项目结构

 lib
 ├── main.dart
 ├── common
 ├── components
 ├── cofig
 ├── constants
 ├── delegate
 ├── events
 ├── models
 │   ├── pood
 │   └── state_model
 ├── pages
 │   ├── detail
 │   └── home
 │   ├── index
 │   └── mine
 │   ├── movie
 │   └── popular
 │   ├── theme
 ├── route
 ├── utils
 └assets

依赖库

部分图标采用了icons,查看具体的图标名称可到 ionics官方文档。依赖方式,cd 到项目根目录,执行:flutter get packages

  dio: ^1.0.13
  fluro: ^1.4.0
  timeago: ^2.0.10
  scoped_model: ^1.0.1
  event_bus: ^1.0.1
  shimmer: ^0.0.6
  connectivity: ^0.3.2
  fluttertoast: ^2.2.7
  shared_preferences: ^0.4.3
  cached_network_image: ^0.5.1
  flutter_swiper: ^1.1.4
  flutter_spinkit: ^3.0.0
  flutter_staggered_grid_view: ^0.2.6
  flutter_webview_plugin: ^0.3.0+2
  video_player:
    git:
      url: https://github.com/songxiaoliang/flutter_video_player.git

待完善功能

 1. 登录
 2. 分享
 3. 支付
 4. 推送
 5. 局部窗口播放

效果图 (oneplus 5 Android 设备)

More Repositories

1

ReactNativeApp

react native 超级 App
Java
653
star
2

react-native-share

react native 分享
Objective-C
451
star
3

react-native-app-upgrade

react native 版本升级
Java
428
star
4

ComicApp

[停止维护] 基于 ReactNative、Redux 的漫画书App,支持Android、iOS 平台.
JavaScript
379
star
5

react-native-baidu-face

基于百度人脸识别封装的react-native模块,支持Android、iOS平台设备
Java
96
star
6

EncryptionLib

🔥DES 3DES AES XOR SHA Base64 RAS 8种加密工具Android lib库
Java
88
star
7

react-native-split-bundle

react native jsbundle 拆包解决方案,实现 react context 延迟异步加载,基础包、业务包按需加载
JavaScript
69
star
8

react-native-gifview

🌹react native gif图插件.支持动态加载、播放、暂停.【 Android | iOS 】
Objective-C
59
star
9

SuperVideoView

Android video and audio player VideoView package, add gesture control.
Java
33
star
10

react-navigation-redux

react-navigation integrates with Redux
JavaScript
22
star
11

flutter-android-hybrid

Android & Flutter 混合开发实践,包含 Android集成Flutter、Flutter视图加载、交互通信。
Java
20
star
12

react-native-feedback

Based on Alibaba Cloud packaged react-native user feedback platform, support for Android, iOS. Easily integrated, one line of code to get user feedback
Objective-C
16
star
13

LessItemFoldLayout

Android ItemFoldLayout, custom wrapper animation effects. Use the scene: User Setting
Java
16
star
14

loadinglayout

Android LoadingLayout, customizable Gif chart, rounded border, background
Java
14
star
15

react-native-touch-responder

react native 触摸事件机制详解,及高仿微信通讯录功能。
JavaScript
13
star
16

react-native-isomorphism

react native 三端同构
JavaScript
8
star
17

react-native-network

JavaScript
6
star
18

react-native-app-font

A solution for setting up React Native fonts without using system fonts (font scaling, font styles).
JavaScript
5
star
19

native-read-rn-image

native-read-rn-image
Java
4
star
20

CustomDrawableTextView

在TextView中设置drawable时,可以自定义图片大小的TextView。
Java
4
star
21

tangram

react native super video player
3
star
22

CircleImage

可定制边框效果的圆角图
Java
3
star
23

genebox-mini-request

genebox-mini-request 是一个基于JS Decorator 和 Taro 实现的网络请求库,专注于网络请求技术方案。
TypeScript
3
star
24

rn-sdr

react-native 服务驱动渲染实践
JavaScript
3
star
25

PullTextView

徐徐展开的TextView
Java
2
star
26

SuspendeRecyclerView

RecyclerView 悬浮窗提示效果封装
Java
2
star
27

IphoneHelper

Iphone 机型适配工具类
JavaScript
2
star
28

DayNightManager

一款用于Android App 白天与夜间主题模式切换的工具。
2
star
29

react-native-svg-icon

A beautiful solution for loading svg icons in react-native
JavaScript
2
star
30

react-native-code-push-assets

react-native-code-push-assets
Java
2
star
31

react-hook-state-manager

自定义状态管理库
JavaScript
1
star
32

flutter_weather

flutter 天气app, 使用最新版本状态管理工具: Provider4.x
Dart
1
star
33

genebox-mini-server

miniprogram-cli + puppteer 实现小程序持续交付
TypeScript
1
star
34

react-native-plugin

react native 插件化开发实现方案
TypeScript
1
star