완전 쉽고 간단한 Flutter 로 카메라 사용하기

어플에서 자주 쓰는 카메라 연동에 대해 알아볼 것이다.

Dart 패키지에는 camera 관련 패키지가 있어 라이브러리를 가져와서 사용하면 된다.

아래의 단계별로 테스트를 진행해보겠다.

정말 별거 없고.. image_picker 패키지만 가져다가 조금만 구현하면 되는구나

1. pubspec.yaml 에 의존성 추가하기 (라이브러리 가져와서 사용하겠다는 의미)

2. 카메라로 직접 촬영하던지, 갤러리에서 가져와 쓸 수 있도록 구현하자

---

 

1. pubspec.yaml 에 의존성 추가하기 (라이브러리 가져와서 사용하겠다는 의미)

image_picker 패키지는 pub.dev에서 99점의 점수를 기록하고 있어서 말해뭐해? 정도의 퀄리티를 자랑한다고 할까나..

2. 카메라로 직접 촬영하던지, 갤러리에서 가져와 쓸 수 있도록 구현하자.

유튜브 더코딩파파 님의 영상에서 가져온 것이고 내용은 정말 별 것 없다.

(pub.dev의 image_picker 라이브러리의 Read_me 부분을 발췌해서 가져온 것이다.)

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

class UseCamera extends StatefulWidget {
  @override
  _UseCameraState createState() => _UseCameraState();
}

class _UseCameraState extends State<UseCamera> {
  File _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    Future getImage(ImageSource imageSource) async {
      final pickedFile = await picker.getImage(source: imageSource);

      setState(() {
        _image = File(pickedFile.path);
      });
    }

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            FlatButton(
              color: Colors.accents[2],
              onPressed: () {
                getImage(ImageSource.camera);
              },
              child: Text('Camera'),
            ),
            FlatButton(
              color: Colors.accents[5],
              onPressed: () {
                getImage(ImageSource.gallery);
              },
              child: Text('Gallery'),
            ),
            showImage(),
          ],
        )
      )
    );
  }

  Widget showImage() {
    if(_image == null) {
      return Container();
    } else {
      return Image.file(_image);
    }
  }
}

 

이제 화면에는 camera, gallery 두가지가 보일 건데, camera를 클릭하면 카메라앱이 실행될 것이고, gallery를 클릭하면 갤러리앱이 실행될 것이다.

카메라 호출해서 사진촬영하고 저장하는 부분은 별로 어려울 게 없는 것 같네.