Flutter 가 개발 한 틱 톡 국제 판 인 스 턴 스 코드 를 사용 하여 상세 하 게 설명 합 니 다.
최근 이틀 동안 Flutter 를 이용 하여 틱 톡 국제 판 을 개발 하 는 데 시간 이 걸 렸 습 니 다.개인 적 으로 Flutter 를 이용 하여 app 을 개발 하 는 것 이 빠 르 고 싫 지 않 은 것 같 습 니 다.이틀 이면 대충 개발 할 수 있 습 니 다.가장 중요 한 것 은 열 과부하 이 고 실시 간 으로 UI 구 조 를 조정 하 는 것 이 매우 편리 합 니 다.해당 속도 가 매우 빠 릅 니 다.다음 그림:
주요 프로젝트 구조
개발 은 주로 lib 폴 더 에 있 습 니 다.
기능 소개
주요 의존 구성 요소,국내 미 러 다운로드,명심 하 세 요!!!
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
글꼴 파일 포함,주로 틱 톡 자체 글꼴 파일
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 로 다운로드 하기 위해 서 입 니 다.
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";
}
}
모델 층주로 실체 층,json 분석 후 귀속 데이터 및 전달 데이터
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;
}
}
투시도 층또한 화면 층 은 주로 세 개의 홈 화면,trendingscreen,그리고 비디오 화면 을 표시 합 니 다.
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 페이지 에 연결 합 니 다.
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 은 주로 바 인 딩 데 이 터 를 위해 틱 톡 영상 을 보 여 줍 니 다.
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),
),
),
);
}
이번 개발 은 주로 플 루 터 환경 구축 에 사용 되 며 국내 미 러 를 사용 하 는 것 을 명심 하고 별도의 튜 닝 은 대리 에 협조 하면 된다.다른 완 료 될 내 비게 이 션 페이지 는 이틀 동안 남 은 것 을 완성 할 계획 입 니 다.
여러분 이 관심 있 는 것 은 제 github 에 스타 를 눌 러 주세요.메 시 지 는 dart 환경 을 개발 하고 구축 하 는 것 을 가르쳐 드릴 수 있 습 니 다.주소:https://github.com/WangCharlie/douyin
총결산
플 루 터 가 개발 한 틱 톡 국제 판 을 이용 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 플 루 터 틱 톡 국제 판 콘 텐 츠 는 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
콘텐츠 SaaS | 모바일 네이티브 개발용 Flutter SDK기본 모바일 지원을 위해 Bloomreach Content Flutter SDK로 시작하세요. Flutter는 단일 코드베이스에서 아름답고 고유하게 컴파일된 다중 플랫폼 애플리케이션을 빌드하기 위한 오픈 소스 프레임...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.