您好所有Flutter开发人员

大家都知道flutter 1.9已发布并支持许多新的小部件。要了解更多在此处添加了发行说明的内容

今天我们将要看看如何使用image_picker插件从Gallery＆Camera获取图像和视频文件

这里的流程如何

1. 在添加image_picker插件pubspec.yaml
2. 添加所需的权限（如果有）
3. 调用ImagePicker.pick*，这将为您返回一个文件
4. 显示文件或执行所需的操作。

所以开始吧

添加Depedencies

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  # Dependency for image pi

block1.yaml

添加权限

按照指定的插件，您不需要android的任何权限，但是对于iOS，我们需要指定一些权限

将以下项添加到/ios/Runner/Info.plist中的Info.plist文件中：

NSPhotoLibraryUsageDescription —描述您的应用为何需要照片库权限的原因。在视觉编辑器中，这称为“隐私—照片库使用说明”。NSCameraUsageDescription —描述为什么您的应用需要访问相机。在视觉编辑器中，这称为“隐私-相机使用说明”。NSMicrophoneUsageDescription —描述如果您打算录制视频，为什么您的应用需要访问麦克风。在视觉编辑器中，这称为“隐私-麦克风使用说明”。

<!-- Add these permissions for ios -->
    <key>NSCameraUsageDescription</key>
    <string>Used to demonstrate image picker plugin</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Used to capture audio for image picker plugin</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Used to demonstrate image picker plugin</string>

block2.plist

我们已经完成了许可。

调用插件

为了从图库中选择图像

我们使用插件提供的方法，ImagePicker.pickImage即接受多个参数

source：这可以是ImageSource.gallery或ImageSource.camera

imageQuality：这会在你想要什么质量的文件是speciy，这个属性接受double来自0 to 100例如，如果你的文件是先大后显示图像时以更好地使用我们可能会得到错误imageQuality

maxWidth：您希望图像的最大宽度是多少

maxHeight：您希望图像达到的最大高度是多少

如果指定，则图像将最大maxWidth且最宽maxHeight。否则，图像将以其原始宽度和高度返回。

File  _image;
// This funcion will helps you to pick and Image from Gallery
_pickImageFromGallery() async {
    File image = await  ImagePicker.pickImage(source: ImageSource.gallery, imageQuality: 50);

    setState(() {
        _image = image;    
    });
}

block3.dart

为了从相机中选择图像

File _cameraImage;
// This funcion will helps you to pick and Image from Camera
_pickImageFromCamera() async {
    File image = await  ImagePicker.pickImage(source: ImageSource.camera, imageQuality: 50);

    setState(() {
      _cameraImage = image;    
    });
}

block4.dart

在这里，我们有一个函数，我们可以在其中调用函数，并获得图像，现在可以在哪里调用它以及如何显示图像

Conatiner(
    child: Column(
        children: <Widget>[
            if(_image != null) 
                Image.file(_image)
            else
                Text("Click on Pick Image to select an Image", style: TextStyle(fontSize: 18.0),),
            RaisedButton(
                onPressed: () {
                _pickImageFromGallery();
                // or
                // _pickImageFromCamera(); 
                // use the variables accordingly
                },
                child: Text("Pick Image From Gallery"),
            ),
        ]
    )
)

现在，我们已经了解了如何通过单行代码从Gallery和Camera中选择图像。

5.gif

图像选择器演示

让我们看看如何从Gallery和Camera中挑选视频

我们可以看到从采摘的图像和视频的唯一变化是pickVideoinsted的的pickImage

ImagePicker.pickVideo仅接受一项，即source可以ImageSource.gallery或ImageSource.camera

为了显示和播放视频，我们需要依赖第三方，因为Flutter默认情况下不支持视频播放

因此，对于位移视频，我们使用video_player插件

在此添加此依赖项 pubspec.yaml

# Dependency for video player
video_player: ^0.10.2+1

block6.yaml

现在，下面的函数将调用插件来选择视频文件，并向我们返回File或null

如果source指定为ImageSource.gallery，则提示您从图库中选择

File _video;
// This funcion will helps you to pick a Video File
_pickVideo() async {
    File video = await ImagePicker.pickVideo(source: ImageSource.gallery);
     _video = video; 
    _videoPlayerController = VideoPlayerController.file(_video)..initialize().then((_) {
      setState(() { });
      _videoPlayerController.play();
    });
}

block7.dart

如果source指定为ImageSource.camera，则提示您从“相机”中选择

File _cameraVideo;
// This funcion will helps you to pick a Video File from Camera
_pickVideoFromCamera() async {
    File video = await ImagePicker.pickVideo(source: ImageSource.camera);
     _cameraVideo = video; 
    _cameraVideoPlayerController = VideoPlayerController.file(_cameraVideo)..initialize().then((_) {
      setState(() { });
      _cameraVideoPlayerController.play();
    });
}

block8.dart

为了播放视频，我们正在使用video_player此插件需要的插件VideoPlayerController。

_cameraVideoPlayerController = VideoPlayerController.file(_cameraVideo)..initialize().then((_) {
    setState(() { });
    _cameraVideoPlayerController.play();
});

上面的代码我们已经在_pickVideo()和_pickVideoFromCamera()函数中编写了

这段代码将首先设置我们正在从文件中播放视频，然后initialize在initialize完成后调用，然后我们就可以了setState(() {})，然后使用_controller.play()

我们还必须VideoPlayerController.file播放文件VideoPlayerController.asset中的视频VideoPlayerController.network以播放资产中的视频以播放网络中的视频

Container(
    child: Column(
        children: <Widget>[
            if(_video != null) 
                    _videoPlayerController.value.initialized
                ? AspectRatio(
                    aspectRatio: _videoPlayerController.value.aspectRatio,
                    child: VideoPlayer(_videoPlayerController),
                )
                : Container()
            else
                Text("Click on Pick Video to select video", style: TextStyle(fontSize: 18.0),),
            RaisedButton(
                onPressed: () {
                    _pickVideo();
                },
                child: Text("Pick Video From Gallery"),
            ),
        ],
    ),
),

block10.dart

AspectRatio(
    aspectRatio: _videoPlayerController.value.aspectRatio,
    child: VideoPlayer(_videoPlayerController),
)

block11.dart

在上面的代码中，我们将AspectRatio根据视频大小使用调整窗口小部件的大小。

我们呼吁_pickImage，_pickVideo方法，当我们按下一个按钮

视频选择器演示

这就是我们从图库或照相机中选择图像或视频的方式

您可以在此处获取源代码

翻译自：https://medium.com/@KarthikPonnam/image-video-picker-flutter-1222f3764da9