第五篇- 抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫
前言
由于中间几个月项目天天加班,导致没没时间更新,最近一段时间对前端进行了重构,加了很多页面,如登录、注册、关注、个人中心等,目前写这个纯属业余个人爱好,所以断断续续的继续在做…
前端地址:https://www.pgyer.com/dtok
后端服务器地址:http://47.95.209.198:8181/
注释:由于本人的apple id无法打包ios、所以暂时只打包的android版本,ios版本正在解决账号问题
效果如下:
架构更新
之前技术采用flutter做的前端,后端api则对接的是抖音官方api,由于抖音的官方api更新频繁,导致经常播放不了,所以索性自己来写服务器后端api,那么后端api采用了那些技术咧
- springcloud 主要是后台控制面板 演示地址:http://47.95.209.198:8181/login
- elasticsearch 主要对视频数据离线查询
- ipfs 用于分布式节点存储短视频
- ethereum 用户激励用户存储短视频、毕竟买服务器存花费够大的
界面更新
- 支持国家化,多语言切换
- ipfs上传、下载文件
- 登录页面
- 注册页面
- 上下轮播时优化播放效果
- 点赞功能
其他功能还在继续完善,各位喜欢的话欢迎点个star 前端项目地址:https://github.com/telsacoin/telsavideo
后端需要的话请留下邮箱
本期最大的优化就是国际化,flutter国家化按以下步骤
在pubspec.yaml文件加上
flutter:sdk: flutterflutter_localizations:sdk: flutterintl: ^0.17.0 # Add this lineffi: ^1.1.2
在底部的flutter设置里添加
# The following section is specific to Flutter.
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: truegenerate: true # Add this line
新建多语言包
在lib目录新建子目录l10n
里面添加app_zh.arb文件
内容如下:
{"home_top_foryou":"推荐","home_top_following":"关注","home_share":"分享","home_buttom_title":"首页","home_buttom_discover":"发现","home_buttom_notification":"通知","home_buttom_persion":"我"
}
在main文件引用
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
在build里加入多语言检测及支持的代码
return MaterialApp(debugShowCheckedModeBanner: false,onGenerateTitle: (context) =>AppLocalizations.of(context)!.home_buttom_title,home: SplashScreen(),localeResolutionCallback: (Locale? locale,Iterable<Locale> supportedLocales,) {return locale;},localizationsDelegates: AppLocalizations.localizationsDelegates,supportedLocales: AppLocalizations.supportedLocales,theme: ThemeData(textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.white,),splashColor: Colors.transparent,highlightColor: Colors.transparent,primarySwatch: Colors.red,primaryColor: Colors.black,indicatorColor: Colors.white,tabBarTheme: TabBarTheme(),),/* initialRoute: '/',onGenerateRoute: RouteGenerator.generateRoute, */builder: (context, child) {return ScrollConfiguration(behavior: MyBehavior(),child: child!,);},);
然后在需要引用的位置加入
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
调用的位置
AppLocalizations.of(context)!.home_top_foryou
至此,国际化就完成了
另外本地针对播放模块进行了优化,将代码拆分到videoplayer.dart文件.一来是方便代码阅读,而来可以作为子组件使用,其他的代码写得太冗余也在继续拆开,独立出来,各位感兴趣的可以关注项目的进展。
采用FutureBuilder对界面请求数据异步处理,当加载完成后才播放,效果更佳
代码如下:
return FutureBuilder<DTok>(future: videos,builder: (context, snapshot) {print(snapshot.connectionState);if (snapshot.connectionState == ConnectionState.waiting) {return loading;// return Column(// crossAxisAlignment: CrossAxisAlignment.center,// mainAxisAlignment: MainAxisAlignment.center,// children: [// loading,// Visibility(// visible: snapshot.hasData,// child: PageView.builder(// controller: foryouController,// onPageChanged: (index) {// //when the video is changing, release the previous video instance.// //disposeVideo();// setState(() {});// },// scrollDirection: Axis.vertical,// itemCount: snapshot.data!.itemList!.length,// itemBuilder: (context, index) {// var item = snapshot.data!.itemList![index];// return Videoplayer(// item: item,// width: MediaQuery.of(context).size.width,// heigth: MediaQuery.of(context).size.height,// );// }),// )// ],// );} else if (snapshot.connectionState == ConnectionState.done) {if (snapshot.hasError) {return Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: [const Text('Error, Please restart your app agagin')],);} else if (snapshot.hasData) {try {return PageView.builder(controller: foryouController,onPageChanged: (index) {//when the video is changing, release the previous video instance.//disposeVideo();//setState(() {});},scrollDirection: Axis.vertical,itemCount: snapshot.data!.itemList!.length,itemBuilder: (context, index) {var item = snapshot.data!.itemList![index];return Videoplayer(item: item,width: MediaQuery.of(context).size.width,heigth: MediaQuery.of(context).size.height,);});} catch (e) {return Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,color: Colors.black,child: Center(child: Text('Error, Please restart your app again.',style: TextStyle(color: Colors.white),)),);}} else {// empty datareturn loading;}} else {return Text('State: ${snapshot.connectionState}');}});
这里可以看到当snapshot.connectionState == ConnectionState.waiting的时候请求的数据正在加载中,则显示加载的图标loading
当snapshot.connectionState == ConnectionState.done 时,此时数据已经加载完毕,但是加载完毕有可能也没有数据,所以需要判断不同的情况
当加载出现异常情况则显示异常的widget
if (snapshot.hasError) {return Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: [const Text('Error, Please restart your app agagin')],);}
当if (snapshot.hasData)则说明有返回值,但是这个返回值不一定就是我们需要的数据,所以还需要try catch一下,保证呈现给用户的界面是正常的
try {return PageView.builder(controller: foryouController,onPageChanged: (index) {//when the video is changing, release the previous video instance.//disposeVideo();//setState(() {});},scrollDirection: Axis.vertical,itemCount: snapshot.data!.itemList!.length,itemBuilder: (context, index) {var item = snapshot.data!.itemList![index];return Videoplayer(item: item,width: MediaQuery.of(context).size.width,heigth: MediaQuery.of(context).size.height,);});} catch (e) {return Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,color: Colors.black,child: Center(child: Text('Error, Please restart your app again.',style: TextStyle(color: Colors.white),)),);}}
其他情况则返回加载状态,因为没有数据返回
另外加载videoplay的时候把width、heigth传入到下一个控件,这样好计算界面呈现的宽度与高度
return Videoplayer(item: item,width: MediaQuery.of(context).size.width,heigth: MediaQuery.of(context).size.height,);
结语
请继续关注本博客,其他页面持续更新完成,源码地址:telsavideo, 欢迎fork和star,谢谢!!!
再次奉上演示地址:
前端地址:https://www.pgyer.com/dtok
后端服务器地址:http://47.95.209.198:8181/
第五篇- 抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫相关推荐
- 第二篇-用Flutter手撸一个抖音国内版,看看有多炫
前言 继上一篇使用Flutter开发的抖音国际版 后再次撸一个国内版抖音,大部分功能已完成,主要是Flutter开发APP速度很爽, 先看下图 项目主要结构介绍 这次主要的改动在api.dart 及 ...
- 用Flutter手撸一个抖音国际版 看看有多炫
肉眼品世界导读: 本文为启明星技术架构师社群作者投稿,字节跳动选择了flutter作为混合开发的语言,Flutter "一出生"就以"UI 漂亮.像素级可控.性能流畅.可 ...
- 五分钟,手撸一个Spring容器!
Spring是我们最常用的开源框架,经过多年发展,Spring已经发展成枝繁叶茂的大树,让我们难以窥其全貌. 这节,我们回归Spring的本质,五分钟手撸一个Spring容器,揭开Spring神秘的面 ...
- 呆呆带你手撸一个思维导图-基础篇
希沃ENOW大前端 公司官网:CVTE(广州视源股份) 团队:CVTE旗下未来教育希沃软件平台中心enow团队 「本文作者:」 前言 你盼世界,我盼望你无bug.Hello 大家好,我是霖呆呆! 哈哈 ...
- 五分钟,手撸一个Spring容器
大家好,我是老三,Spring是我们最常用的开源框架,经过多年发展,Spring已经发展成枝繁叶茂的大树,让我们难以窥其全貌. 这节,我们回归Spring的本质,五分钟手撸一个Spring容器,揭开S ...
- 手写一个抖音视频去水印工具,千万别刚一个程序员
百因必有果 说一下我为什么要做个抖音视频去水印工具,其实是因为我的沙雕女友,她居然刚我~ 有天晚上她在抖音看见一个非常具有 教育意义 的视频,"男人疼媳妇就该承包全部家务活",然后 ...
- 手写一个抖音视频去水印Java工具,千万别刚一个程序员
关注公众号后台回复pay或mall获取实战项目资料+视频 百因必有果 说一下我为什么要做个抖音视频去水印工具,其实是因为我的沙雕女友,她居然刚我~ 有天晚上她在抖音看见一个非常具有 教育意义 的视频, ...
- 【海思篇】【Hi3516DV300】八、手撸一个海思SPI驱动
目的:使用SPI接口让LCD绘制LOGO:让更多的爱好者了解海思.加入海思. 目录 1 查询SPI相关的寄存器 2 SPI的管脚复用 3 SPI的时钟开启 4 SPI1_CSN0启用和配置 5 实现读 ...
- 【限流02】限流算法实战篇 - 手撸一个单机版Http接口通用限流框架
本文将从需求的背景.需求分析.框架设计.框架实现几个层面一步一步去实现一个单机版的Http接口通用限流框架. 一.限流框架分析 1.需求背景 微服务系统中,我们开发的接口可能会提供给很多不同的系统去调 ...
最新文章
- 安装Exchange2013,FMS服务无法达到启动状态
- 平台资源表 表和表字段的命名规范——JEPLUS软件快速开发平台
- 易语言易语言浏览器html5,易语言做浏览器的方法
- Android之解决键盘覆盖编辑框问题
- 支付宝会员卡开卡表单模板配置(alipay.marketing.card.formtemplate.set)JAVA版本demo
- jQuery UI应用--滑块Slider
- 数据结构与算法-列表相关时间复杂度
- 【Spring Boot】Spring Boot之整合RabbitMQ并实现消息的发送和接收
- DOM(十四):代理检测和事件处理(跨浏览器)
- RocketMQ 常见异常处理
- KDevelop下如何选择不同的源文件进行执行
- 深度:芸芸众司向AI进军路上的笑与泪
- mysql修改数据sql语句_sql语句修改数据
- 2021年后Win10续用IE Flash插件的方法
- 编译 scintilla 并且缩小 SciLexer的 体积的做法
- 利用色彩范围和钢笔工具抠图
- 面向硬件编程的一些思考
- POJ 3689 Equations 题解 《挑战程序设计竞赛》
- 考研复试——数据库(一)
- Oracle 并行操作