[flutter] 플러터에서 훅(hook)을 이용하여 이미지 업로드 기능 구현하기

14 Dec 2023

flutter

이미지 업로드는 모바일 앱에서 자주 사용되는 기능 중 하나입니다. 플러터에서 이미지 업로드를 구현하는 방법 중 하나는 훅(hook)을 사용하는 것입니다. 이 기술은 상태 관리와 뷰 로직을 더욱 간단하게 만들어주는데요. 이번 블로그에서는 플러터에서 훅을 이용하여 이미지 업로드 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치하기

우선 flutter_hooks 패키지를 설치합니다. 이 패키지를 사용하여 훅을 활용할 수 있습니다.

dependencies:
  flutter_hooks: ^0.16.0

패키지를 설치한 뒤에는 터미널에서 flutter pub get 명령어로 의존성을 가져옵니다.

2. 이미지 업로드 폼 만들기

이미지를 업로드할 수 있는 폼을 만들어봅시다. 먼저 텍스트 필드와 이미지를 선택할 수 있는 버튼을 추가하고, useImagePicker 훅을 사용하여 이미지를 선택하는 로직을 추가합니다.

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:image_picker/image_picker.dart';

Widget build(BuildContext context) {
  var image = useImagePicker();
  
  return Column(
    children: [
      TextFormField(
        // 텍스트 필드
      ),
      ElevatedButton(
        onPressed: () {
          image.pickImage(); // 이미지 선택 버튼
        },
        child: Text('이미지 선택'),
      ),
      if (image.pickedImage != null) Image.file(image.pickedImage), // 선택한 이미지를 보여줌
    ],
  );
}

3. 이미지 업로드 처리

이제 선택한 이미지를 서버에 업로드하는 로직을 추가해봅시다. 서버에 이미지를 업로드하기 위해 http 패키지를 사용할 수 있습니다.

import 'dart:io';
import 'package:http/http.dart' as http;

void uploadImage(File imageFile) async {
  var url = Uri.parse('your_upload_url');
  var request = http.MultipartRequest('POST', url);
  request.files.add(http.MultipartFile('file', imageFile.readAsBytes().asStream(), imageFile.lengthSync(), filename: 'filename.jpg'));
  var response = await request.send();
  if (response.statusCode == 200) {
    print('이미지 업로드 성공');
  } else {
    print('이미지 업로드 실패');
  }
}

4. 완성된 이미지 업로드 폼

이제 이미지 업로드 폼이 완성되었습니다. 사용자는 이미지를 선택하고, 선택한 이미지를 서버에 업로드할 수 있습니다.

Widget build(BuildContext context) {
  var image = useImagePicker();
  
  return Column(
    children: [
      TextFormField(
        // 텍스트 필드
      ),
      ElevatedButton(
        onPressed: () {
          image.pickImage(); // 이미지 선택 버튼
        },
        child: Text('이미지 선택'),
      ),
      if (image.pickedImage != null) Image.file(image.pickedImage), // 선택한 이미지를 보여줌
      ElevatedButton(
        onPressed: () {
          uploadImage(image.pickedImage); // 이미지 업로드 버튼
        },
        child: Text('이미지 업로드'),
      ),
    ],
  );
}

마치며

본 블로그에서는 플러터에서 훅을 이용하여 이미지 업로드 기능을 구현하는 방법에 대해 알아보았습니다. flutter_hooks 패키지를 사용하여 간단하고 효율적인 이미지 업로드 기능을 구현할 수 있다는 것을 확인했습니다. 이를 활용하여 다양한 모바일 앱에 이미지 업로드 기능을 쉽게 추가할 수 있을 것입니다.