DTOK pages 34-37! (First)(Previous)(Final)

it's my birthday and i'll (make u) cry if i want to :^)

Part 5 — The powerful opponent of Douyin is coming, use Flutter to create an international version of Tiktok and see how dazzling it is

## 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 Douyin. Due to the frequent updates of Douyin’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: ````json { “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 ````dart import ‘package:flutter_gen/gen_l10n/app_localizations.dart’; ````

Add multi-language detection and support code to the build ````dart 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 ````dart import ‘package:flutter_gen/gen_l10n/app_localizations.dart’; ````

where to call ````dart 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(() {});

DTOK pages 30-33! (First)(Previous)(Next)

big ol' update to make up for the hiatus! completed comic is now available for patreon subscribers!

DTOK page 28! (First) (Previous) (Next)

O(--( i am thinking about the end of this scene and i want to make it there FASTER OUGH

DTOK page 27! (First) (Previous) (Next)

keith's doing everything he can think of to prevent the outcome of his future....

DTOK page 24! (First) (Previous) (Next)

hidden resentments bubble to the surface..!!!!!

DTOK page 26! (First) (Previous) (Next)

ANYWAY PIDGE WON'T BE REBUILDING THAT DECODER FOR SURE AFTER THIS LMAO

and so the question remains... why IS keith still here.. o:

DTOK page 23! (First)(Previous)(Next)

those of you who guessed the necklace was a part of lance's old suit.... were correct!! :'^D YAAAAAY GFHGFH

also in tHIS universe, keith got his facial scar from the encounter with the Unknowable Nasties bc WHY NOT! B^)

DTOK page 16! (First)(Previous)(Next)

!!!!!!! O:

DTOK page 25! (First) (Previous) (Next)

KEITH WE UNDERSTAND BUT PLS DO NOT YELL AT THE CHILD

DTOK page 22! (First)(Previous)(Next)

older keith just waltzing in AIRING OUT LANCE'S INSECURITIES

DTOK page 12! (First)(Previous)(Next)

good man coran comes in with the taser to save His Boy LOL

DTOK page 21! (First)(Previous)(Next)

lance's seventh wheel speech still gets me to this DAY o(--<

DTOK page 20! (First)(Previous)(Next)

:'(

DTOK page 19! (First)(Previous)(Next)

EVERYONE'S DEAD OH GOD

DTOK page 18! (First)(Previous)(Next)

those are some genuine Unknowable Entities who you probably don't want to interact with!!