flutter - 如何在颤动中从画廊上传视频
问题描述
当用户单击按钮时,我正在构建一个应用程序,它进入图库并选择图库中的任何视频,然后返回到应用程序中的主屏幕并自动播放视频。下面是我尝试过的代码。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Image App Demo',
theme: ThemeData(
primaryColor: Color(0xff476cfb),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
File _imageFile;
Future getVideo() async{
File image;
image=await ImagePicker.pickVideo(source: ImageSource.gallery);
setState(() {
_imageFile=image;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Image Upload"),
),
body: ListView(
children: <Widget>[
Center(
child: Column(
children: <Widget>[
SizedBox(height: 10.0,),
RaisedButton(
child: Text("Video"),
onPressed: (){
getVideo();
},
),
],
),
)
],
}
解决方案
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:video_player/video_player.dart';
void main() => runApp(VideoPlayerApp());
class VideoPlayerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Player Demo',
home: VideoPlayerScreen(),
);
}
}
class VideoPlayerScreen extends StatefulWidget {
VideoPlayerScreen({Key key}) : super(key: key);
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
VideoPlayerController _controller;
Future<void> _initializeVideoPlayerFuture;
File videoFile;
@override
void initState() {
// Create and store the VideoPlayerController. The VideoPlayerController
// offers several different constructors to play videos from assets, files,
super.initState();
}
@override
void dispose() {
// Ensure disposing of the VideoPlayerController to free up resources.
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Butterfly Video'),
),
// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
body: Column(
children: <Widget>[
Visibility(
visible: _controller != null,
child: FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// If the VideoPlayerController has finished initialization, use
// the data it provides to limit the aspect ratio of the video.
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
// Use the VideoPlayer widget to display the video.
child: VideoPlayer(_controller),
);
} else {
// If the VideoPlayerController is still initializing, show a
// loading spinner.
return Center(child: CircularProgressIndicator());
}
},
),
),
RaisedButton(
child: Text("Video"),
onPressed: () {
getVideo();
},
),
],
),
floatingActionButton: _controller == null
? null
: FloatingActionButton(
onPressed: () {
// Wrap the play or pause in a call to `setState`. This ensures the
// correct icon is shown.
setState(() {
// If the video is playing, pause it.
if (_controller.value.isPlaying) {
_controller.pause();
} else {
// If the video is paused, play it.
_controller.play();
}
});
},
// Display the correct icon depending on the state of the player.
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
Future getVideo() async {
Future<File> _videoFile =
ImagePicker.pickVideo(source: ImageSource.gallery);
_videoFile.then((file) async {
setState(() {
videoFile = file;
_controller = VideoPlayerController.file(videoFile);
// Initialize the controller and store the Future for later use.
_initializeVideoPlayerFuture = _controller.initialize();
// Use the controller to loop the video.
_controller.setLooping(true);
});
});
}
}
推荐阅读
- html - 防止 Flexbox 变大,截断文本
- c++ - 如何解析包含整数的字符串并检查是否大于C++中的最大值
- javascript - 我如何/可以通过在请求正文中使用 x-www-form-urlencoded 来发送我的有效负载的 RxJs POST 请求
- android - 如何柔化和调整cameraX中预览和抓图的亮度?
- javascript - 使用 R Shiny 比较条件面板中的日期
- python - 无法保存两种形式的数据
- swift - resignFirstResponder 没有按预期工作。每次按键时键盘都会弹出而不是仅返回
- c - 在通过 python 3.6 扩展的 C 编译代码上使用 valgrind
- java - “错误:无法创建 Java 虚拟机错误:致命异常...”当我尝试启动 Eclipse IDE 2019-06 时显示错误
- java - JDBC语句可以运行执行计划/解释计划吗?