Flutter Image / Video Picker — Flutter — Karthik Ponnam — Medium

Привет всем разработчикам флаттера

Все вы знаете, что у флаттера 1.9 есть релиз и он поддерживает много новых виджетов. Чтобы узнать больше, что добавил примечания к выпуску здесь

Сегодня мы увидим, как использовать image_picker плагин для получения файла изображения и видео из галереи и камеры

Вот как будет течь

  1. Добавлять image_picker подключаемый модуль pubspec.yaml
  2. Добавьте необходимые разрешения, если они есть
  3. Вызов ImagePicker.pick* и это вернет вам файл
  4. Отобразите файл или выполните необходимое действие.

Итак, давайте начнем

Добавление зависимостей

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  
  image_picker: ^0.6.1+4

Добавление разрешений

Как указано в плагинах, вам не нужно никаких разрешений для Android, но для iOS нам нужно указать некоторые разрешения.

Добавьте следующие ключи в файл Info.plist, расположенный в /ios/Runner/Info.plist:

NSPhotoLibraryUsageDescription — опишите, почему вашему приложению требуется разрешение для библиотеки фотографий. В визуальном редакторе это называется Privacy — Photo Library Usage Description.
NSCameraUsageDescription — опишите, почему вашему приложению нужен доступ к камере. В визуальном редакторе это называется Конфиденциальность — Описание использования камеры.
NSMicrophoneUsageDescription — опишите, зачем вашему приложению нужен доступ к микрофону, если вы собираетесь записывать видео. В визуальном редакторе это называется Конфиденциальность — Описание использования микрофона.

  
  <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>

Мы закончили с разрешения.

Плагин вызова

Чтобы выбрать изображение из галереи

Мы используем метод, предоставляемый плагином, т.е. ImagePicker.pickImage который принимает несколько параметров

source: Это может быть ImageSource.gallery или же ImageSource.camera
imageQuality: это указывает, в каком качестве вы хотите, чтобы файл был, это свойство принимает double из 0 to 100
Например, если ваш файл слишком большой, мы можем получить ошибку при отображении изображения, поэтому лучше использовать imageQuality
maxWidth: какой максимальной ширины должно быть изображение?
maxHeight: какой максимальной высоты должно быть изображение?

Если указано, изображение будет не более maxWidth широкий и maxHeight высокий. В противном случае изображение будет возвращено с исходной шириной и высотой.

File  _image;

_pickImageFromGallery() async {
    File image = await  ImagePicker.pickImage(source: ImageSource.gallery, imageQuality: 50);

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

Чтобы выбрать изображение с камеры

File _cameraImage;

_pickImageFromCamera() async {
    File image = await  ImagePicker.pickImage(source: ImageSource.camera, imageQuality: 50);

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

Здесь у нас есть функции, в которых мы можем вызвать функцию и получить изображение, где его вызывать и как отображать изображение.

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();
                
                
                
                },
                child: Text("Pick Image From Gallery"),
            ),
        ]
    )
)

Теперь у нас есть, как выбрать изображение из галереи и камеры с помощью одной строки кода.

image_picker.gif

Давайте посмотрим, как выбрать видео из галереи и камеры.

Единственное изменение, которое мы можем увидеть при выборе изображения и видео, это pickVideo вместо pickImage

ImagePicker.pickVideo принимает только одно свойство, т.е. source чем может ImageSource.gallery или же ImageSource.camera

Чтобы отображать и воспроизводить видео, нам нужно зависеть от третьей стороны, потому что Flutter по умолчанию не поддерживает воспроизведение видео.

Итак, для отображения видео мы используем video_player плагин

Добавьте эту зависимость в pubspec.yaml


video_player: ^0.10.2+1

Теперь приведенная ниже функция вызовет плагин для выбора видеофайла и вернет нам файл или ноль.

Если source указывается как ImageSource.gallery Вам предлагается выбрать из галереи

File _video;

_pickVideo() async {
    File video = await ImagePicker.pickVideo(source: ImageSource.gallery);
     _video = video; 
    _videoPlayerController = VideoPlayerController.file(_video)..initialize().then((_) {
      setState(() { });
      _videoPlayerController.play();
    });
}

Если source указывается как ImageSource.camera Вам предлагается выбрать из камеры

File _cameraVideo;

_pickVideoFromCamera() async {
    File video = await ImagePicker.pickVideo(source: ImageSource.camera);
     _cameraVideo = video; 
    _cameraVideoPlayerController = VideoPlayerController.file(_cameraVideo)..initialize().then((_) {
      setState(() { });
      _cameraVideoPlayerController.play();
    });
}

Для воспроизведения видео мы используем 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"),
            ),
        ],
    ),
),

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

Над фрагментом кода мы будем использовать AspectRatio изменить размер виджета в соответствии с размером видео.

Мы называем _pickImage, _pickVideo методы всякий раз, когда мы нажимаем кнопку

Вот как мы выбираем изображение или видео из галереи или камеры.

video_picker.gif

Вы можете получить Исходный код здесь

Спасибо за ваше время.

Надеюсь вам понравится, если да хлопать и делиться.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *