본문 바로가기
프로그래밍/Flutter & Dart

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

by 어느덧중반 2020. 7. 31.
반응형

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

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를 클릭하면 갤러리앱이 실행될 것이다.

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

반응형

댓글