服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - 使用Flutter开发的抖音国际版实例代码详解

使用Flutter开发的抖音国际版实例代码详解

2022-12-16 15:10风清扬 No.1 Android

这篇文章主要介绍了使用Flutter开发的抖音国际版，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

简介

最近花了两天时间研究使用Flutter开发一个抖音国际版. 个人感觉使用Flutter开发app快得不要不要的额. 两天就基本可以开发个大概出来. 最主要是热重载，太方便实时调整UI布局了. 相应速度极快. 如下图：

使用Flutter开发的抖音国际版实例代码详解

主要项目架构

使用Flutter开发的抖音国际版实例代码详解

详细说明一下，开发主要在lib文件夹

  • pubspec.yaml是配置插件的位置，如http: ^0.12.0+4，类似依赖组件.
  • common文件夹存放的是重写的网络组件，以及图标组件icons.dart
  • config文件夹存放的api.dart，wei调用的api配置文件
  • models文件存放的实体层
  • screen文件夹存放的页面view层
  • tabs存放的底部切换文件夹层
  • widgets存放的组件，包含视频播放组件player.dart以及左右等描述组件

功能介绍

主要的依赖组件，请使用国内镜像下载，切记切记！！！！

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
flutter:
  sdk: flutter
 flutter_svg: ^0.17.4
 
 # The following adds the Cupertino Icons font to your application.
 # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^0.1.3
 cached_network_image: ^2.2.0
 json_annotation: ^3.0.1
 font_awesome_flutter: ^8.8.1
 http: ^0.12.0+4
 provider: ^4.0.4
 avatar_glow: any
 getflutter: ^1.0.11
 flutter_money_formatter: ^0.8.3
 video_player: ^0.10.8+1
 dio: ^3.0.9
 dio_cookie_manager: ^1.0.0

包含字体文件，主要为抖音自带的字体文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:flutter/widgets.dart';
 
class DouyinIcons {
 DouyinIcons._();
 
 static const _kFontFam = 'DouyinIcons';
 static const IconData chat_bubble =
   const IconData(0xe808, fontFamily: _kFontFam);
 static const IconData create = const IconData(0xe809, fontFamily: _kFontFam);
 static const IconData heart = const IconData(0xe80a, fontFamily: _kFontFam);
 static const IconData home = const IconData(0xe80b, fontFamily: _kFontFam);
 static const IconData messages =
   const IconData(0xe80c, fontFamily: _kFontFam);
 static const IconData profile = const IconData(0xe80d, fontFamily: _kFontFam);
 static const IconData reply = const IconData(0xe80e, fontFamily: _kFontFam);
 static const IconData search = const IconData(0xe80f, fontFamily: _kFontFam);
}

此次采用Flutter开发安卓、IOS等 app确实方便，主要为将tiktok的数据使用http下载下来.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import 'package:http/http.dart' as http;
 
class RequestController {
 static String host = "https://www.tiktok.com/";
 String url = host +
   "/share/item/list?secUid=&id=&type=5&count=30&minCursor=0&maxCursor=0&shareUid=&lang=en&_signature=pKb.ogAgEB9ImoSQahoqJKSm.rAAPox";
 
 Future<String> getCookie() async {
  try {
   var response = await http.get(host + "/share/item/");
   return response.headers["set-cookie"];
  } catch (e) {
   return "error";
  }
 }

Model层

主要为实体层，解析json后绑定数据以及传递数据

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Tiktok {
 int statueCode;
 Body body;
 Object errMsg;
 
 Tiktok({this.statueCode, this.body, this.errMsg});
 
 Tiktok.fromJson(Map<String, dynamic> json) {
  statueCode = json['statusCode'];
  body = json['body'] != null ? new Body.fromJson(json['body']) : null;
  errMsg = json['errMsg'];
 }
 
 Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['statusCode'] = this.statueCode;
  if (this.body != null) {
   data['body'] = this.body.toJson();
  }
  data['errMsg'] = this.errMsg;
  return data;
 }
}

视图层

另外屏幕层主要包含三个，homescreen，trendingscreen，以及显示videoscreen

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import 'package:flutter/material.dart';
import 'package:flutter_app/Screens/trendingScreen.dart';
import 'package:flutter_app/widgets/bottom_toolbar.dart';
 
class Home extends StatefulWidget {
 @override
 HomeState createState() => HomeState();
}
 
class HomeState extends State<Home> {
 int currentIndex = 0;
 PageController pageController;
 
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: PageView(
    controller: pageController,
    children: <Widget>[
     Trending(),
    ],
    onPageChanged: (int index) {
     setState(() {
      currentIndex = index;
     });
    },
   ),
   bottomNavigationBar: bottomItems(currentIndex, pageController),
  );
 }
}

Tending层，主要包含读取抖音的api，将api转化成实体对象，绑定数据到videoscreen页面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:getflutter/getflutter.dart';
import 'package:flutter_app/config/api.dart';
import 'package:flutter_app/models/Tiktok.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_app/Screens/videoScreen.dart';
class Trending extends StatefulWidget {
 _TrendingState createState() => _TrendingState();
}
class _TrendingState extends State<Trending> {
 PageController pageController;
 BuildContext context;
 RequestController api = RequestController();
 List<Widget> videos = [];
 getTrending() async {
  var cookies = await api.getCookie();
  api.setCookie(cookies);
  try {
   var response = await http.get(
    api.url,
    headers: api.headers,
   );
   Tiktok tiktok = Tiktok.fromJson(jsonDecode(response.body));
   tiktok.body.itemListData.forEach(
    (item) {
     setState(() {
      videos.add(VideoItem(data: item));
     });
    },
   );
  } catch (ex) {
   SimpleDialog(
    title: Text('Hot videos list is empty'),
   );
   print(ex);
  }
 }
 @override
 void initState() {
  super.initState();
  getTrending();
 }
 @override
 Widget build(BuildContext context) {
  context = context;
  return PageView(
   scrollDirection: Axis.vertical,
   controller: pageController,
   children: videos.length == 0
     ? <Widget>[
       Container(
        color: Colors.black,
        child: Center(
         child: GFLoader(
          type: GFLoaderType.circle,
          loaderColorOne: Colors.blueAccent,
          loaderColorTwo: Colors.white,
          loaderColorThree: Colors.pink,
         ),
        ),
       )
      ]
     : videos,
  );
 }
}

VideoScreen主要为绑定数据. 展示抖音的视频

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import 'package:flutter/material.dart';
import 'package:flutter_app/models/Tiktok.dart';
import 'package:flutter_app/widgets/video_description.dart';
import 'package:flutter_app/widgets/actions_toolbar.dart';
import 'package:flutter_app/widgets/player.dart';
class VideoItem extends StatelessWidget {
 final ItemListData data;
 const VideoItem({@required this.data});
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: Stack(
    children: <Widget>[
     DouyinVideoPlayer(
      url: data.itemInfos.video.urls[0],
     ),
     title(),
     VideoDescription(
      description: data.itemInfos.text,
      musicName: data.musicInfos.musicName,
      authorName: data.musicInfos.authorName,
      userName: data.authorInfos.uniqueId,
     ),
     ActionsToolbar(
      comments: data.itemInfos.commentCount.toString(),
      userImg: data.authorInfos.covers[0],
      favorite: data.itemInfos.diggCount,
      coverImg: data.musicInfos.covers[0],
     ),
    ],
   ),
  );
 }
 Widget title() => Align(
    alignment: Alignment.topCenter,
    child: Padding(
     padding: EdgeInsets.symmetric(vertical: 28.0),
     child: Text(
      "Trending | For You",
      style: TextStyle(color: Colors.white, fontSize: 19.0),
     ),
    ),
   );
}

此次开发主要时间用在搭建Flutter环境上，切记使用国内镜像，另外调式需要配合代理即可。

其他待完成的包含底部的导航页面，打算花两天时间把剩余的完成.

使用Flutter开发的抖音国际版实例代码详解

各位感兴趣的可以到我的github上点一下star. 留言可以教你们开发以及搭建dart环境. 地址:https://github.com/WangCharlie/douyin

总结

到此这篇关于使用Flutter开发的抖音国际版的文章就介绍到这了,更多相关flutter抖音国际版内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://www.cnblogs.com/fengqingyangNo1/p/12927538.html

  • 抖音国际版
  • Flutter

    • 延伸 · 阅读

    精彩推荐
    • AndroidAndroid实现图片轮播切换实例代码

      Android实现图片轮播切换实例代码

      利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换，其中当点击“上一张”图片时，切换到上一张图片；当点击“下一张”图片时，切换到下...

      Android开发网6172021-04-20
    • AndroidListView通用泛型适配器

      ListView通用泛型适配器

      今天小编就为大家分享一篇关于ListView通用泛型适配器，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看...

      Zy_JiBai9812022-09-16
    • AndroidAndroid 实现永久性开启adb 的root权限

      Android 实现永久性开启adb 的root权限

      这篇文章主要介绍了Android 实现永久性开启adb 的root权限，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      honghong966212022-11-28
    • Android使用PackageManager获得应用信息实例方法

      使用PackageManager获得应用信息实例方法

      PackageManager是Android中一个很有用的类，能够获取已安装的应用（包）的信息，如应用名称、图标、权限，安装、删除应用（包）等...

      Android开发网4382021-02-14
    • Android详解VirtualApk启动插件Activity

      详解VirtualApk启动插件Activity

      这篇文章主要介绍了详解VirtualApk启动插件Activity，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      JasmineBen4602022-02-23
    • AndroidAndroid控件之ProgressBar用法实例分析

      Android控件之ProgressBar用法实例分析

      这篇文章主要介绍了Android控件之ProgressBar用法,以一个完整实例形式较为详细的分析了ProgressBar控件操作进度显示的使用技巧,具有一定参考借鉴价值,需要的...

      Ruthless12242021-03-30
    • AndroidAndroid实现底部切换标签

      Android实现底部切换标签

      这篇文章主要为大家详细介绍了Android实现底部切换标签，嵌套Fragment，方便自定义布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      qq_148761337722022-03-10
    • AndroidOpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解

      OpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解

      今天小编就为大家分享一篇OpenGL关于glStencilFuncSeparate()和glStencilFunc()函数的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需...

      yangyongUestc10552022-10-12
    最近更新
    编辑推荐
    阅读排行
    热门标签
    等待界面 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图