Quick Drop 6주차 회고

ImagePicker 추가

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

class ImageInput extends StatefulWidget {
  final Function(File) onSelectImage; // 콜백 함수 추가

  const ImageInput({required this.onSelectImage, super.key});

  @override
  State<StatefulWidget> createState() {
    return _ImageInputState();
  }
}

class _ImageInputState extends State<ImageInput> {
  File? _selectedImage;

  void _takePicture() async {
    final imagePicker = ImagePicker();
    final pickedImage =
        await imagePicker.pickImage(source: ImageSource.camera, maxWidth: 400);
    if (pickedImage == null) {
      return;
    }
    setState(() {
      _selectedImage = File(pickedImage.path);
    });
    widget.onSelectImage(_selectedImage!); // 사진을 선택하면 콜백 함수 호출
  }

  @override
  Widget build(BuildContext context) {
    Widget content = TextButton.icon(
      icon: const Icon(Icons.camera),
      label: const Text('Take a picture'),
      onPressed: _takePicture,
    );
    if (_selectedImage != null) {
      content = GestureDetector(
        onTap: _takePicture,
        child: Image.file(
          _selectedImage!,
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      );
    }
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          width: 1,
          color: Theme.of(context).colorScheme.primary.withOpacity(0.2),
        ),
      ),
      height: 250,
      width: double.infinity,
      alignment: Alignment.center,
      child: content,
    );
  }
}

플러터에서 이미지를 활용하려면 dart:io라는 패키지 활용이 필수이다.
async/await 사용이 필요하기 때문.

• 기초 세팅

1. AndriodManiFest.xml 내 user-permission 추가
2. android/app/src 폴너 내 build.gradle에서 minSdkVersion 21 로 변경

아 그리고 이미지 촬영 기능은 ios 시뮬에선 불가능 한것도 이번에 개발하면서
처음 알게 되었다.

BE와 연결

내가 담당한 upload 정보를 BE분이 만드신 서버와 연결을 진행하였다.
처음에 변수명 오타로 인해 422 에러도 발생하고, 아예 에러도 발생했지만
어찌됐든 연결 성공...

그리고 이렇게 Post한 정보를 Get으로 가져올 수도 있게끔 만들었다.

  void sendPostRequest() async {
    final response = await http.post(
      Uri.parse('http://api.../donation/upload'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, dynamic>{
        'Product_Title': productInfo['Product Title']['controller'].text,
        'Product_description':
            productInfo['Product description']['controller'].text,
        'brandName': brandNameController.text,
        'dateOfManufacture': dateOfManufactureController.text,
        'color': colorController.text,
        'category': categoryController.text
      }),
    );

멋사 활동할때 나는 DetailPage 담당이라 Get 만 해봤는데,
이번 GDSC 활동을 통해서 POST 까지 경험하게 되었다.

이제 Image 파일 통신만 이루어지면 플젝의 의도했던 기능 90퍼센트는 마무리 된다.
이미지 파일의 경로를 주고 받는 것 같은데, 이게 이미지가 HEIC,JPEG,PNG 중 어떤 형식으로 가는지를 공부하는 것이 필요한 것 같다.