Flutter 14주차 (1) - 이미지 피커(image_picker) 활용하기

Flutter 14주차 (1) - 이미지 피커(image_picker) 활용하기

 

이번 주차에서는 이미지 피커를 활용하여 갤러리나 카메라와 연동하는 앱을 만들어 볼 예정이다.

갤러리에서 선택하거나 카메라로 찍은 사진을 화면에 출력하는 간단한 앱이다.

 

목차

 

 

image_picker 패키지 등록하기

 

이미지 피커를 사용하기 위해선 다음처럼 이미지 피커 패키지를 pubspec.yaml 파일의 dependencies 항목에 등록해야 한다.

 

pub.dev 사이트에 들어가서 image_picker를 검색한 후 dependencies 항목에 등록하자.

 

 

 

Flutter 패키지는 버전 업데이트가 자주 일어나는데 이전 버전이면 다른 패키지와 충돌이 발생할 수도 있으므로 가능하면 pub.dev에서 검색해서 최신 버전의 패키지를 다운받는 것을 추천한다.

 

 

 

코드 작성하기

 

lib 폴더 아래에 ch23_2 디렉터리를 만들고 안에 test.dart 파일을 만든 후 코드를 작성하자.

 

 

 

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NativePluginWidget(),
    );
  }
}

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

  @override
  State<NativePluginWidget> createState() => _NativePluginWidgetState();
}

class _NativePluginWidgetState extends State<NativePluginWidget> {
  XFile? _image;

  Future getGalleryImage() async {
    var image = await ImagePicker().pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  Future getCameraImage() async {
    var image = await ImagePicker().pickImage(source: ImageSource.camera);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Picker'),),
      body: Container(
        color: Colors.indigo,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: (<Widget>[
              ElevatedButton(onPressed: getGalleryImage, child: Text('gallery')),
              Center(
                child: _image == null
                ? Text(
                  'No image selected',
                  style: TextStyle(color: Colors.white),
                ) : CircleAvatar(
                  backgroundImage: FileImage(File(_image!.path)),
                  radius: 100,
                ),
              ),
              ElevatedButton(onPressed: getCameraImage, child: Text('camera')),
            ]),
          ),
        ),
      ),
    );
  }
}

 

 

코드를 작성하고 앱을 실행시키면 아래와 같이 gallery 버튼과 camera 버튼이 나타나게 된다.

 

 

 

camera 버튼을 누르면 아래와 같이 실제 카메라를 실행시켜 사진을 찍고 그 사진을 앱 가운데에 출력하게 된다.

 

 

 

gallery 버튼을 누르면 휴대폰 내의 사진을 가져올 수 있다.

그런데 에뮬레이터에는 사진이 없어 임시로 사진을 에뮬레이터 안에 넣어줘야 한다.

 

우측의 디바이스 매니저 창을 열고 사용하는 디바이스의 오른쪽에 점을 누르고 'Open in Device Explorer'를 클릭하자.

 

 

그러면 아래와 같이 Device Explorer 창이 뜨게 되는데, 여기서 'storage -> emulated -> 0 -> Pictures' 폴더로 이동하여 원하는 사진을 넣고 에뮬레이터를 재실행 하면 된다.

 

 

 

다시 앱을 실행시켜 gallery 버튼을 누르자.

 

처음에는 Recent 창으로 들어가게 되는데, 왼쪽 메뉴 버튼을 누르고 sdk_gphone64_arm64 으로 들어가자.

거기서 Pictures 로 들어가면 아까 Device Explorer에서 넣었던 사진을 선택할 수 있다.

 

 

갤러리 내의 사진도 잘 불러오는 걸 확인할 수 있다.