[flutter] - Flutter에서의 사진 및 카메라 기능 사용 방법

Flutter는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 사진 및 카메라 기능을 사용하여 사용자에게 더욱 풍부한 경험을 제공할 수 있습니다. 이번 블로그 포스트에서는 Flutter 앱에서 사진을 캡처하고 갤러리에서 사진을 선택하는 방법을 알아보겠습니다.

이미지 캡처하기

사진을 캡처하는 것은 Flutter에서 간단한 작업입니다. image_picker 패키지를 사용하여 사진을 캡처할 수 있습니다. 먼저 프로젝트에 image_picker 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음 코드를 추가하고 flutter packages get 명령어를 실행하세요.

dependencies:
  image_picker: ^0.7.4

이제 다음과 같은 코드를 사용하여 사진을 캡처할 수 있습니다.

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

class CaptureImagePage extends StatefulWidget {
  @override
  _CaptureImagePageState createState() => _CaptureImagePageState();
}

class _CaptureImagePageState extends State<CaptureImagePage> {
  File _image;

  Future<void> _captureImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.camera);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Capture Image'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image != null
                ? Image.file(
                    _image,
                    width: 300,
                    height: 300,
                  )
                : Text('No Image'),
            SizedBox(height: 20),
            RaisedButton(
              onPressed: _captureImage,
              child: Text('Capture'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 CaptureImagePage라는 StatefulWidget을 정의하고, _captureImage() 메소드를 사용하여 사진을 캡처하고 _image 변수에 저장하는 방법을 보여줍니다. 화면에는 사진 미리보기를 나타내기 위해 Image.file 위젯이 사용되었습니다.

갤러리에서 사진 선택하기

갤러리에서 사진을 선택하는 것도 간단합니다. image_picker 패키지의 getImage 메소드의 source 매개변수를 ImageSource.gallery로 설정하여 갤러리에서 사진을 선택할 수 있습니다. 위에서 작성한 코드를 약간 수정하여 갤러리에서 사진을 선택하는 기능을 추가해보겠습니다.

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

class PickImagePage extends StatefulWidget {
  @override
  _PickImagePageState createState() => _PickImagePageState();
}

class _PickImagePageState extends State<PickImagePage> {
  File _image;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pick Image'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image != null
                ? Image.file(
                    _image,
                    width: 300,
                    height: 300,
                  )
                : Text('No Image'),
            SizedBox(height: 20),
            RaisedButton(
              onPressed: _pickImage,
              child: Text('Pick from Gallery'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 _pickImage() 메소드를 사용하여 갤러리에서 사진을 선택하고 _image 변수에 저장하는 방법을 보여줍니다. 화면에 나타나는 UI는 이전의 코드와 동일합니다.

마무리

Flutter에서 사진 및 카메라 기능을 사용하는 방법에 대해 알아보았습니다. image_picker 패키지를 사용하여 캡처한 사진 또는 갤러리에서 선택한 사진을 앱에 표시할 수 있습니다. 여기에서 다룬 예제 코드를 기반으로 앱에 맞게 기능을 확장해 보세요. Flutter의 강력한 기능을 활용하여 사용자에게 멋진 이미지 기능을 제공할 수 있습니다.

참고 자료