본문 바로가기
Flutter & Dart

Flutter & Dart 플러터 이미지 선택 기능 구현하기: image_picker 사용 가이드

by Sudarii 2023. 8. 18.
728x90

이미지 선택 기능은 많은 앱에서 필요한 기능 중 하나입니다. 플러터에서는 image_picker 패키지를 사용하여 간단하게 이미지를 선택하고 가져올 수 있습니다. 이 블로그 포스트에서는 image_picker 패키지를 활용하여 이미지 선택 기능을 구현하는 방법을 자세히 설명하겠습니다.

1. 필요한 패키지 추가

먼저, 프로젝트의 pubspec.yaml 파일에 image_picker 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^latest_version

2. 이미지 선택 기능 구현

2.1. 패키지 가져오기:

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

2.2. 이미지 선택 함수 작성:

class ImagePickerWidget extends StatefulWidget {
  @override
  _ImagePickerWidgetState createState() => _ImagePickerWidgetState();
}

class _ImagePickerWidgetState extends State<ImagePickerWidget> {
  File _image;

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _image != null
            ? Image.file(
                _image,
                width: 200,
                height: 200,
              )
            : Placeholder(
                fallbackHeight: 200,
                fallbackWidth: 200,
              ),
        ElevatedButton(
          onPressed: _pickImage,
          child: Text('Pick an image'),
        ),
      ],
    );
  }
}

3. 이미지 업로드 및 활용

선택한 이미지를 서버로 업로드하거나, 프로필 사진 변경 등의 용도로 활용할 수 있습니다. 선택한 이미지는 File 형태로 가져오므로, 이미지 경로를 사용하여 업로드나 활용을 처리할 수 있습니다.

4. 예외 처리

이미지를 선택하는 과정에서 예외가 발생할 수 있으므로, try-catch 구문을 활용하여 예외 처리를 해주어야 합니다.

5. 추가 옵션

image_picker 패키지는 카메라로 사진 촬영 등 다양한 옵션도 제공합니다. 해당 옵션을 활용하여 앱에 적합한 이미지 선택 기능을 구현할 수 있습니다.

728x90