第五篇-|第五篇- 抖音的强大对手来了,用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上传、下载文件
- 登录页面
- 注册页面
- 上下轮播时优化播放效果
- 点赞功能
后端需要的话请留下邮箱
本期最大的优化就是国际化,flutter国家化按以下步骤 在pubspec.yaml文件加上
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.17.0 # Add this line
ffi: ^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: true
generate: 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';
【第五篇-|第五篇- 抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫】在build里加入多语言检测及支持的代码
return MaterialApp(
debugShowCheckedModeBanner: false,
onGenerateTitle: (context) =>
AppLocalizations.of(context)!.home_buttom_title,
home: SplashScreen(),
localeResolutionCallback: (
Locale? locale,
Iterable 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(
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 data
return 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/
推荐阅读
- 一篇文章带你Java多线程入门
- #|Session详解,学习Session,这篇文章就够了(包含底层分析和使用)
- #|【手写Tomcat】10.实现对静态资源的放行(完结篇)
- Mysql|MySQL经典100问
- ubuntu安装mmcv-full看这一篇就够了
- C#利用反射实现多数据库访问
- 这篇文章,带你全面了解外包公司
- C#内存管理CLR深入讲解(下篇)
- 5分钟用动效工厂实现粒子动画
- 快讯|极客日报(传抖音多位内容负责人将转岗;马斯克兄弟:我们兄弟俩都不迷恋财富;Chrome 99发布 | 极客头条)