이미지 피커 ImagePicker

https://pub.dev/packages/image_picker
ImagePicker를 사용하면 갤러리에서 이미지를 선택하거나 카메라로 사진을 찍는 기능을 쉽게 구현할 수 있습니다.

image_picker를 설치합니다.

$ flutter pub add image_picker

ImagePicker 사용하기

image_picker는 위젯에서 아래와 같이 사용합니다.

import 'package:image_picker/image_picker.dart';

// ...

final ImagePicker _picker = ImagePicker();

final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

if (image != null) {
    // 이미지 서명하기
    final imageBytes = await image.readAsBytes();
    final signature = await signImage(imageBytes, password);

    // 이미지 업로드하기
    final response = await uploadImage(image, username, signature);
}

• 참고: https://pub.dev/packages/image_picker/example
  
  

이미지 서명 함수 구현하기

서명에는 steemdart_ecc 패키지를 사용합니다.
steemdart_ecc 패키지는 아직 디벨롭 중이지만, steem 서명 함수는 구현되어 있습니다.
https://github.com/anpigon/steemdart_ecc

import 'package:steemdart_ecc/steemdart_ecc.dart'

Future signImage(
  Uint8List imageBytes,
  String password,
) async {
  try {
    final prefix = utf8.encode('ImageSigningChallenge');
    final imageBytes = await image.readAsBytes();
    
    final buff = BytesBuilder();
    buff.add(prefix);
    buff.add(imageBytes);
    
    final privateKey = SteemPrivateKey.fromString(password);
    final signature = privateKey.sign(buff.toBytes());
    
    return signature;
  } catch (error, stackTrace) {
    logger.e('failed to sign images', error, stackTrace);
    rethrow;
  }
}

이미지 업로드 함수 구현하기

플러터에서 이미지를 업로드하기 위해 dio 패키지를 사용했습니다.
HTTP requests는 http 패키지가 인기가 더 많습니다.
하지만 저는 파일업로드를 dio로 구현하는게 더 쉽습니다.

import 'package:dio/dio.dart';

Future uploadImage(
  XFile media,
  String username,
  SteemSignature signature,
) async {
  final multipartFile = await MultipartFile.fromFile(media.path);
  final formData = FormData.fromMap({"file": multipartFile});
  
  const imageApi = "https://steemitimages.com";
  final uploadUrl = "$imageApi/$username/${signature.toHex()}";
  final response = await Dio().post(
    uploadUrl,
    data: formData,
    options: Options(
      contentType: 'multipart/form-data',
      headers: {
        'Authorization': imageApi,
      },
    ),
  );
  return response;
}

응답 결과

이미지 업로드에 성공하면 다음과 같은 응답 결과를 받게 됩니다.

{"url":"https://cdn.steemitimages.com/DQmeAr3G3DG6ocMJe4B63iD5ew7vu3oP2s2piLivYkowgh6/l26awe5s.jpg"}

구현하는데 참고한 문서

플러터에 steemit 이미지 업로드를 구현하기위해 steem 개발 문서와 이타인님의 블로그 글을 참고했습니다. 이타인님의 글이 정말 많은 도움이 되었습니다. 감사합니다.

• https://developers.steem.io/services/imageHoster
• https://steemit.com/hive-101145/@etainclub/avle-keychain-dart