flutter图片预览_Flutter 视频缩略图
在做即時通訊前整理了一個視頻縮略圖的工具類，可供碼農直接放入項目中使用，涉及到的插件：
video_player: ^0.10.11+2
話不多說代碼如下：
import 'package:flutter/material.dart';
import 'package:spanners/cTools/vedioPalyer.dart';
import 'package:video_player/video_player.dart';
class AddVideoFirstImage extends StatefulWidget {
final String videoUrl;
const AddVideoFirstImage({Key key, this.videoUrl}) : super(key: key);
@override
_AddVideoFirstImageState createState() => _AddVideoFirstImageState();
}
class _AddVideoFirstImageState extends State {
//視頻 縮略圖
VideoPlayerController _controller;
Future _initializeVideoPlayerFuture;
@override
Widget build(BuildContext context) {
@override
void initState() {
// TODO: implement initState
setState(() {
//視頻縮略圖
_controller =
VideoPlayerController.network(widget.videoUrl); //網絡視頻，也可以是file
_controller.setLooping(true);
_initializeVideoPlayerFuture = _controller.initialize();
});
super.initState();
}
return Stack(
children: [
Padding(
padding: EdgeInsets.all(0),
child: ConstrainedBox(
constraints: BoxConstraints.expand(),
child: FutureBuilder(
//顯示縮略圖
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
print(snapshot.connectionState);
if (snapshot.hasError) print(snapshot.error);
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: 2 / 3,
// aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
),
),
/* 播放 按鈕所在位置 大小 可根據實際項目 需要 調整 */
Padding(
padding: EdgeInsets.fromLTRB(
MediaQuery.of(context).size.width / 2 - 30 / 2 - 20,
151 / 2 - 20,
MediaQuery.of(context).size.width / 2 - 30 / 2 - 20,
151 / 2 - 20),
child: InkWell(
onTap: () {
/* 視頻上傳成功后 點擊播放視頻 */
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new videoPalyer(
url: widget.videoUrl,
)));
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Icon(
Icons.play_arrow,
color: Colors.white,
size: 40,
),
),
)),
],
);
}
}
總結
以上是生活随笔為你收集整理的flutter图片预览_Flutter 视频缩略图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Flex 布局教程：语法
- 下一篇： [Hadoop]MapReduce多路径