|
|
|
|
import 'package:chewie/chewie.dart';
|
|
|
|
|
import 'package:flutter/cupertino.dart';
|
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
import 'package:huixiang/generated/l10n.dart';
|
|
|
|
|
import 'package:huixiang/view_widget/round_button.dart';
|
|
|
|
|
import 'package:video_player/video_player.dart';
|
|
|
|
|
|
|
|
|
|
class VideoPlaybackPage extends StatefulWidget {
|
|
|
|
|
@override
|
|
|
|
|
State<StatefulWidget> createState() {
|
|
|
|
|
return _VideoPlaybackPage();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class _VideoPlaybackPage extends State<VideoPlaybackPage> {
|
|
|
|
|
var controller = new ScrollController();
|
|
|
|
|
VideoPlayerController videoPlayerController;
|
|
|
|
|
ChewieController chewieController;
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
void initState() {
|
|
|
|
|
// TODO: implement initState
|
|
|
|
|
super.initState();
|
|
|
|
|
// player.setDataSource(
|
|
|
|
|
// "https://www.xxx/test.mp4",
|
|
|
|
|
// autoPlay: false);
|
|
|
|
|
//配置视频地址
|
|
|
|
|
videoPlayerController = VideoPlayerController.network(
|
|
|
|
|
'https://www.runoob.com/try/demo_source/movie.mp4');
|
|
|
|
|
chewieController = ChewieController(
|
|
|
|
|
videoPlayerController: videoPlayerController,
|
|
|
|
|
aspectRatio: 3/ 2, //宽高比
|
|
|
|
|
autoPlay: !true, //自动播放
|
|
|
|
|
looping: true, //循环播放
|
|
|
|
|
// 拖动条样式颜色
|
|
|
|
|
materialProgressColors: new ChewieProgressColors(
|
|
|
|
|
playedColor: Colors.white,
|
|
|
|
|
handleColor: Colors.white,
|
|
|
|
|
backgroundColor: Colors.grey,
|
|
|
|
|
bufferedColor: Colors.transparent,
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
void dispose() {
|
|
|
|
|
/**
|
|
|
|
|
* 页面销毁时，视频播放器也销毁
|
|
|
|
|
*/
|
|
|
|
|
videoPlayerController.dispose();
|
|
|
|
|
super.dispose();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return
|
|
|
|
|
Scaffold(
|
|
|
|
|
body: Container(
|
|
|
|
|
child: SingleChildScrollView(
|
|
|
|
|
physics: BouncingScrollPhysics(),
|
|
|
|
|
child: Column(
|
|
|
|
|
children: [
|
|
|
|
|
Stack(
|
|
|
|
|
children: [
|
|
|
|
|
Container(
|
|
|
|
|
height: 274,
|
|
|
|
|
child:Chewie(
|
|
|
|
|
controller: chewieController,
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Container(
|
|
|
|
|
margin: EdgeInsets.only(top:40,left: 16,right: 16),
|
|
|
|
|
decoration:BoxDecoration(
|
|
|
|
|
color: Colors.transparent,
|
|
|
|
|
),
|
|
|
|
|
child:
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
|
children: [
|
|
|
|
|
GestureDetector(
|
|
|
|
|
child: Icon(
|
|
|
|
|
Icons.arrow_back_ios,
|
|
|
|
|
color: Colors.white,
|
|
|
|
|
size: 24,
|
|
|
|
|
),
|
|
|
|
|
onTap: (){
|
|
|
|
|
Navigator.of(context).pop();
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
|
|
|
|
|
Image.asset(
|
|
|
|
|
"assets/image/icon_share_w.png",
|
|
|
|
|
width: 24,
|
|
|
|
|
height: 24,
|
|
|
|
|
),
|
|
|
|
|
],),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
Container(
|
|
|
|
|
margin: EdgeInsets.only(bottom: 20),
|
|
|
|
|
padding: EdgeInsets.all(16),
|
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
|
color: Colors.white,
|
|
|
|
|
boxShadow: [
|
|
|
|
|
BoxShadow(
|
|
|
|
|
color: Colors.black.withAlpha(12),
|
|
|
|
|
offset: Offset(0, 2),
|
|
|
|
|
blurRadius: 14,
|
|
|
|
|
spreadRadius: 0)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Row(
|
|
|
|
|
children: [
|
|
|
|
|
ClipOval(
|
|
|
|
|
child: Image.network(
|
|
|
|
|
"https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
|
|
|
|
|
fit: BoxFit.cover,
|
|
|
|
|
width: 44,
|
|
|
|
|
height: 44,
|
|
|
|
|
),
|
|
|
|
|
clipBehavior: Clip.hardEdge,
|
|
|
|
|
),
|
|
|
|
|
SizedBox(
|
|
|
|
|
width: 8,
|
|
|
|
|
),
|
|
|
|
|
Expanded(
|
|
|
|
|
child: Container(
|
|
|
|
|
height: 60,
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisAlignment:
|
|
|
|
|
MainAxisAlignment.spaceEvenly,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Text.rich(
|
|
|
|
|
TextSpan(children: [
|
|
|
|
|
TextSpan(
|
|
|
|
|
text: "百花谷",
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: Colors.black),
|
|
|
|
|
),
|
|
|
|
|
]),
|
|
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
|
),
|
|
|
|
|
Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
|
children: [
|
|
|
|
|
Text(
|
|
|
|
|
"2021.04.12 12:12",
|
|
|
|
|
overflow: TextOverflow.ellipsis,
|
|
|
|
|
maxLines: 2,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
color: Color(0xff808080),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Text(
|
|
|
|
|
"播放次数 56",
|
|
|
|
|
overflow: TextOverflow.ellipsis,
|
|
|
|
|
maxLines: 2,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
color: Color(0xff808080),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
flex: 1,
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
SizedBox(
|
|
|
|
|
height: 20,
|
|
|
|
|
),
|
|
|
|
|
Text("牡丹花的养护知识",
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 24,
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
color: Color(0xff1A1A1A))),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Container(
|
|
|
|
|
// margin: EdgeInsets.only(bottom: 20),
|
|
|
|
|
// padding: EdgeInsets.all(16),
|
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
|
color: Colors.white,
|
|
|
|
|
boxShadow: [
|
|
|
|
|
BoxShadow(
|
|
|
|
|
color: Colors.black.withAlpha(12),
|
|
|
|
|
offset: Offset(0, 2),
|
|
|
|
|
blurRadius: 14,
|
|
|
|
|
spreadRadius: 0)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Padding(padding: EdgeInsets.all(16),child:Text("评论 (58) 喜欢 (58)",
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
color: Color(0xff1A1A1A))),),
|
|
|
|
|
SizedBox(
|
|
|
|
|
height: 500,
|
|
|
|
|
child: ListView.builder(
|
|
|
|
|
itemCount: 6,
|
|
|
|
|
scrollDirection: Axis.vertical,
|
|
|
|
|
physics: BouncingScrollPhysics(),
|
|
|
|
|
itemBuilder: (context, position) {
|
|
|
|
|
return _commentItem(position);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
// _commentItem()
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
SizedBox(
|
|
|
|
|
height: 12,
|
|
|
|
|
),
|
|
|
|
|
Container(
|
|
|
|
|
padding: EdgeInsets.all(16),
|
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
|
color: Colors.white,
|
|
|
|
|
boxShadow: [
|
|
|
|
|
BoxShadow(
|
|
|
|
|
color: Colors.black.withAlpha(12),
|
|
|
|
|
offset: Offset(0, 2),
|
|
|
|
|
blurRadius: 14,
|
|
|
|
|
spreadRadius: 0)
|
|
|
|
|
],
|
|
|
|
|
borderRadius: new BorderRadius.only(
|
|
|
|
|
topLeft: Radius.circular(8.0),
|
|
|
|
|
topRight: Radius.circular(8.0),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
child: Row(
|
|
|
|
|
children: [
|
|
|
|
|
Expanded(
|
|
|
|
|
flex: 1,
|
|
|
|
|
child: Container(
|
|
|
|
|
decoration: new BoxDecoration(
|
|
|
|
|
color: Color(0xffF2F2F2),
|
|
|
|
|
borderRadius: BorderRadius.circular(2.0)),
|
|
|
|
|
child: Column(
|
|
|
|
|
children: [
|
|
|
|
|
Container(
|
|
|
|
|
margin: const EdgeInsets.fromLTRB(4, 0, 4, 0),
|
|
|
|
|
alignment: Alignment.topLeft,
|
|
|
|
|
child: TextField(
|
|
|
|
|
maxLines: 8,
|
|
|
|
|
minLines: 1,
|
|
|
|
|
decoration: InputDecoration(
|
|
|
|
|
border: InputBorder.none,
|
|
|
|
|
hintText: "留下您精彩的评论吧~",
|
|
|
|
|
hintStyle: TextStyle(
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: Color(0xffCDCCCC),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Padding(
|
|
|
|
|
padding: EdgeInsets.only(left: 20, right: 20),
|
|
|
|
|
child: Text(
|
|
|
|
|
"发送",
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
color: Color(0XFF1A1A1A)),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Image.asset("assets/image/icon_like_h.png")
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Widget _commentItem(var position) {
|
|
|
|
|
return Container(
|
|
|
|
|
child: Column(
|
|
|
|
|
children: [
|
|
|
|
|
Padding(padding: EdgeInsets.all(16),child: Row(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
|
children: [
|
|
|
|
|
ClipOval(
|
|
|
|
|
child: Image.network(
|
|
|
|
|
"https://t7.baidu.com/it/u=2841334870,333581502&fm=193&f=GIF",
|
|
|
|
|
fit: BoxFit.cover,
|
|
|
|
|
width: 40,
|
|
|
|
|
height: 40,
|
|
|
|
|
),
|
|
|
|
|
clipBehavior: Clip.hardEdge,
|
|
|
|
|
),
|
|
|
|
|
SizedBox(
|
|
|
|
|
width: 12,
|
|
|
|
|
),
|
|
|
|
|
Expanded(
|
|
|
|
|
child: Container(
|
|
|
|
|
height: 60,
|
|
|
|
|
child: Column(
|
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
|
children: [
|
|
|
|
|
Text.rich(
|
|
|
|
|
TextSpan(children: [
|
|
|
|
|
TextSpan(
|
|
|
|
|
text: "张三",
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: Colors.black),
|
|
|
|
|
),
|
|
|
|
|
]),
|
|
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
|
),
|
|
|
|
|
Text(
|
|
|
|
|
"2021.04.12 12:12",
|
|
|
|
|
overflow: TextOverflow.ellipsis,
|
|
|
|
|
maxLines: 2,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
color: Color(0xff808080),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
flex: 1,
|
|
|
|
|
),
|
|
|
|
|
Container(
|
|
|
|
|
alignment: Alignment.topRight,
|
|
|
|
|
child: Row(
|
|
|
|
|
children: [
|
|
|
|
|
Image.asset(
|
|
|
|
|
"assets/image/icon_like.png",
|
|
|
|
|
width: 16,
|
|
|
|
|
height: 16,
|
|
|
|
|
),
|
|
|
|
|
Text(
|
|
|
|
|
"58",
|
|
|
|
|
style: TextStyle(fontSize: 12, color: Color(0xff1A1A1A)),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),),
|
|
|
|
|
Padding(
|
|
|
|
|
padding: EdgeInsets.only(left: 68,right: 16),
|
|
|
|
|
child: Text(
|
|
|
|
|
"文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Mess…",
|
|
|
|
|
style: TextStyle(fontSize: 14, color: Color(0xff1A1A1A)),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
SizedBox(
|
|
|
|
|
height: 12,
|
|
|
|
|
),
|
|
|
|
|
Container(
|
|
|
|
|
width: double.infinity,
|
|
|
|
|
margin: EdgeInsets.only(left: 68,right: 16),
|
|
|
|
|
decoration: new BoxDecoration(
|
|
|
|
|
color: Color(0xffF2F2F2),
|
|
|
|
|
borderRadius: BorderRadius.circular(2.0),
|
|
|
|
|
),
|
|
|
|
|
child: Padding(
|
|
|
|
|
padding: EdgeInsets.only(left: 4, top: 4, bottom: 4),
|
|
|
|
|
child: Text(
|
|
|
|
|
"文本，是指书面语言的表现形式文本，是指、",
|
|
|
|
|
style: TextStyle(fontSize: 12, color: Color(0xff808080)),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
if (position == 5)
|
|
|
|
|
Container(
|
|
|
|
|
height: 63,
|
|
|
|
|
decoration: BoxDecoration(
|
|
|
|
|
color: Color(0xffF2F2F2),
|
|
|
|
|
boxShadow: [
|
|
|
|
|
BoxShadow(
|
|
|
|
|
color: Colors.black.withAlpha(12),
|
|
|
|
|
offset: Offset(0, 2),
|
|
|
|
|
blurRadius: 14,
|
|
|
|
|
spreadRadius: 0)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
margin: EdgeInsets.only(top: 30),
|
|
|
|
|
alignment: Alignment.center,
|
|
|
|
|
child: Text(
|
|
|
|
|
"-已显示全部评论-",
|
|
|
|
|
style: TextStyle(fontSize: 14, color: Color(0xff353535)),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
