The powerful opponent of Tiktok is coming, use Flutter to create an international version of Tiktok

Preface

Due to the project working overtime every day in the middle months, there is no time to update. Recently, the front end has been refactored and many pages have been added, such as login, registration, attention, personal center, etc. Currently writing this is purely a hobby. So I keep doing it intermittently…

Front-end address: https://www.pgyer.com/dtok
Back-end server address: http://47.95.209.198:8181/

Note: Since my apple id cannot package ios, only the android version is packaged for the time being. The ios version is solving the account problem
The effect is as follows:

schema update

The previous technology used the front-end made by flutter, and the back-end api was connected to the official api of Tiktok. Due to the frequent updates of Tiktok’s official api, it was often unable to play, so I simply wrote the server back-end api myself, then the back-end api adopted those technologies

• springcloud is mainly a background control panel demo address: http://47.95.209.198:8181/login
• elasticsearch mainly queries video data offline
• ipfs is used for distributed nodes to store short videos
• ethereum users incentivize users to store short videos, after all, the cost of buying server storage is large enough ## UI update
• Support nationalization, multi-language switching
• ipfs upload and download files
• log in page
• registration page
• Optimize the playback effect when rotating up and down
• Like feature Other functions are still being improved. If you like it, please click the star front-end project address: https://github.com/telsacoin/telsavideo If you need the backend, please leave an email ## The biggest optimization in this issue is internationalization, and flutter nationalization follows the following steps Add in the pubspec.yaml file

flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.17.0 # Add this line
ffi: ^1.1.2


Add in flutter settings at the bottom


# 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

`

New multilingual package

Create a new subdirectory l10n in the lib directory
Add the app_zh.arb file inside
The contents are as follows:
`

{
“home_top_foryou”:”Recommended”,
“home_top_following”:”Following”,
“home_share”:”Share”,
“home_buttom_title”:”Home”,
“home_buttom_discover”:”Discover”,
“home_buttom_notification”:”Notification”,
“home_buttom_persion”:”me”
}


referenced in main file


import ‘package:flutter_gen/gen_l10n/app_localizations.dart’;


Add multi-language detection and support code to the 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!,
);
},
);


Then add it where it needs to be referenced


import ‘package:flutter_gen/gen_l10n/app_localizations.dart’;


where to call


AppLocalizations.of(context)!.home_top_foryou

`

So far, the internationalization is complete

In addition, the local playback module is optimized, and the code is split into the videoplayer.dart file. First, it is convenient for code reading, and it can be used as a sub-component. Other codes are too redundant and continue to be disassembled and independent. , you can follow the progress of the project if you are interested.

Use FutureBuilder to asynchronously process the interface request data, and play it after the loading is completed, the effect is better

code show as below:
`

dart
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,
// height: 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(() {});