在做即時通訊前整理了一個視頻縮略圖的工具類，可供碼農直接放入項目中使用，涉及到的插件：

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 视频缩略图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。