반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/08   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

welcome to my blog

[Flutter] image_picker를 이용한 카메라기능구현 본문

Flutter

[Flutter] image_picker를 이용한 카메라기능구현

_annie_ 2022. 1. 3. 20:51
728x90

쿡북에 camera 패키지를 사용해보라고 되어있는데 온갖 warning이 떠서 다른 패키지를 알아보던차에

image_picker를 알게되었다

 

image_picker를 사용하면 간단하게 사진촬영도 할수있고 갤러리에서 이미지도 가져올수있다.

 

1. 패키지 설치

flutter pub add image_picker
image_picker: ^0.8.4+4
import 'package:image_picker/image_picker.dart';

import 해서 사용

 

2. 카메라 권한설정

 

<android>

//android/gradle.properties

android.useAndroidX=true
android.enableJetifier=true
//android/app/src/debug
//android/app/src/profile

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<ios>

//ios/Runner/info.plist
    
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera description.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) photos description.</string>

NSCameraUsageDescription : 카메라권한

NSPhotoLibraryUsageDescription: 앨범권한

string : alert 메시지창에 표시할 문구

 

Flutter iOS 14.0 build error: Failed to register observatory port with mDNS 라는 에러가 뜰 경우 ios/Runner/info.plist에 추가

<key>NSBonjourServices</key>
<array>
	<string>_dartobservatory._tcp</string>
</array>

 

 

3. 이미지 source 설정 (결과값 image에 저장)

카메라

var image = await ImagePicker.platform.pickImage(source: ImageSource.camera);

앨범

var image = await ImagePicker.platform.pickImage(source: ImageSource.gallery);

 

4. 이미지 display

Image.file(File(widget._image!.path))

 

728x90
반응형