42. [Flutter] ImagePicker 앨범 이미지, 동영상 가져오기 및 촬영하기

핸드폰에 저장되어있는 이미지, 동영상을 가져오거나 촬영할 때,

ImagePicker를 사용하면됩니다.

 

앞서 포스팅한 camera 패키지와 다른점

녹화시간을 지정하는 기능을 제공하지않으며

기본적인 촬영 버튼 등. UI를 제공한다는 점입니다.

 

 

---

준비물.

사용하기 위해서 pubdev에서 패키지를 설치해줍니다.

- pubdev ImagePicker 설치링크: https://pub.dev/packages/image_picker

image_picker | Flutter Package

 

 

IOS사용을 위해 아래와 같이 소스를 추가해줍니다.

• 다음 위치에 있는 Info.plist 파일 에 다음 키를 추가하세요 <project root>/ios/Runner/Info.plist.
• NSPhotoLibraryUsageDescription- 앱에 사진 라이브러리에 대한 권한이 필요한 이유를 설명하세요. 시각적 편집기에서는 이를 개인 정보 보호 - 사진 라이브러리 사용 설명 이라고 합니다.
  false을 항상 통과 하는 경우 이 권한이 요청되지 않지만 requestFullMetadataApp Store 정책에 따라 plist 항목을 포함해야 합니다.
• NSCameraUsageDescription- 앱이 카메라에 액세스해야 하는 이유를 설명하세요. 비주얼 편집기에서는 이를 개인 정보 보호 - 카메라 사용 설명 이라고 합니다.
• NSMicrophoneUsageDescription- 동영상을 녹화하려는 경우 앱이 마이크에 액세스해야 하는 이유를 설명하세요. 비주얼 편집기에서는 이를 개인 정보 - 마이크 사용 설명 이라고 합니다.

Android는 따로 추가할 소스가 없이 즉시 작동합니다.

 

ImagePicker()로 사용할 수 있는 것들

이미지, 비디오, 미디어, 멀티이미지등 을 선택하여 가져올 수 있습니다.

 

이번시간에는 동영상 pickVideo()를 사용하겠습니다.

---

구현 목표:

1. TestScreen 에서 ImagePicker를 이용하여 동영상을 가져오고 정보를 video 변수에 넣습니다.
2. 가져온 동영상을 TestScreen2의 video 인자값으로 전달하여 VideoPlayer로 동영상을 재생합니다.

---

소스.

TestScreen.dart (앨범에서 동영상 가져오는 화면)

import 'package:flutter/material.dart';
import 'package:flutter_application_ticktok_clone/features/authentication/widgets/testwidget2.dart';
import 'package:image_picker/image_picker.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  void initState() {
    super.initState();
  }

  Future<void> _onTap() async {
    final video = await ImagePicker().pickVideo(source: ImageSource.gallery);
    //ImageSource.gallery : 앨범에서 동영상 가져오기
    //ImageSource.camera  : 카메라로 동영상 촬영하기
    if (!mounted) return;
    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => TestScreen2(video: video),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IconButton(
            onPressed: _onTap,
            icon: const Icon(
              Icons.image,
              size: 43,
            )),
      ),
    );
  }
}

 

• 동영상을 가져올 수 있도록 이미지모양의 버튼을 생성합니다.
• _onTap으로 ImagePicker를 비동기방식으로 호출하여 동영상을 변수 video에 저장합니다.
  • ImagePicker().pickVideo(source.gallery); 는 앨범에서 동영상 가져올 수있는 기능을 제공합니다.
  • ImagePicker().pickVideo(source.camera); 는 카메라로 직접 동영상을 촬영하는 기능을 제공합니다.
• 가져온 동영상 video를 TestScreen2에 전달합니다.

 

TestScreen2.dart (가져온 동영상을 VideoPlay하는 화면)

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class TestScreen2 extends StatefulWidget {
  final video;
  const TestScreen2({super.key, required this.video});

  @override
  State<TestScreen2> createState() => _TestScreen2State();
}

class _TestScreen2State extends State<TestScreen2> {
  late VideoPlayerController _videoPlayerController;

  @override
  void initState() {
    _videoPlayerController =
        VideoPlayerController.file(File(widget.video.path));
    super.initState();
    _videoPlayerController.initialize();
    _videoPlayerController.play();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Video PreView'),
        ),
        body: Center(child: VideoPlayer(_videoPlayerController)));
  }
}

• VideoPlayerController.file(File(widget.video.path)); 로 TestScreen으로 부터 전달 받은 video를 VideoController에 넣습니다.
• VideoPlayerController를 initialize() 하여 초기화합니다.
• VideoPlayer에 Controller로 지정하여 Play합니다.

---

빌드된 모습.