[Flutter] Flutter Image crop, Flutter image picker, 플러터 사진 자르기

플러터 선택한 사진 자르는 방법

 

글 작성 개요 : 가끔 우리는 사진을 갤러리에서 고를 필요가 있습니다. 그리고 그 사진을 완벽하게는 아니더라도 자르고싶을 때가 있습니다. 

 

그것에 대해 설명할게요

-Getx

https://pub.dev/packages/get

get | Flutter Package

https://blog.codefactory.ai/flutter/getx-navigation/

[앱개발] [Flutter] Flutter 개발자는 무조건 알아야 하는 GetX [#1-Navigation]

-필수-

 

-ImagePicker

https://pub.dev/packages/image_picker

image_picker | Flutter Package

-crop your image

https://pub.dev/packages/crop_your_image

crop_your_image | Flutter Package

 

두개의 dependency설정

 

1. imagePicker 의 경우 Android와 Ios의 의존성을 추가해주면 됩니다.

https://fre2-dom.tistory.com/346

[Flutter] 플러터 image_picker 패키지를 통해 카메라 구현

위 Tistory에서 접근 권한을 참고하면 될 것입니다.

 

2. ImagePicker사용하기

 

ElevatedButton(
                  onPressed: () async{
                    final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery);
                    print(await image?.readAsBytes());
                  },
                  child: Text("Image Picker")),

XFile 제너릭의 image는 공식 링크나 맥북기준 cmd를 눌러 다양한 설정을 확인할 수 있다. 

 

우리는 이 선택된 이미지를 다른 화면에서 crop하고 싶습니다.

그러면 crop된 이미지를 따로 변수에 저장하면 될 것 같습니다.

 

 var testController = Get.put(TestController());
 선언
 
 
 ElevatedButton(
                  onPressed: () async{
                    final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery);
                    print(await image?.readAsBytes());
                    testController.temp = await image?.readAsBytes(); //변수 저장
					Get.to(CropScreen());// 페이지 이동
                  },
                  child: Text("Image Picker")),

 

 

 

그리고

import 'dart:typed_data';

import 'package:alpha/viewModel/TestController.dart';
import 'package:crop_your_image/crop_your_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CropScreen extends StatefulWidget {
  const CropScreen({Key? key}) : super(key: key);

  @override
  State<CropScreen> createState() => _CropScreenState();
}

class _CropScreenState extends State<CropScreen> {
  var testController = Get.put(TestController()); //TestController 싱글톤 패턴을 통해 불러오기
  var _cropimage; //보여줄 crop image
  final _controller = CropController(); //cropcontroller 추가

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Crop(
              controller: _controller,
                image: testController.temp,
                onCropped: (image) {
                setState(() {
                  _cropimage = image; //_controller.crop실행 될 때 cropimage 저장됨
                });
                }
            ),
          ),
          Expanded(
            child: Container(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () async {
                  _controller.crop();
                },
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  child: Text('CROP IT!'),
                ),
              ),
            ),
          ),
          Expanded(
            child: Container(
              width: double.infinity,
              child: _cropimage == null? Text("아직 값이 없어요"):
              Image.memory(Uint8List.fromList(_cropimage)),
            ),
          ),
        ],
      ),
    );
  }
}

이런식으로 작성하면 된다.

 

만약 cropimage에 대한 것이 더욱 궁금하다면

https://github.com/chooyan-eng/crop_your_image/blob/main/example/lib/main.dart

GitHub - chooyan-eng/crop_your_image: A flutter plugin which provides Crop Widget for cropping images.

깃에 예제코드가 친절하게 설명되어있다. 복붙해서 좀만 보면 금방 이해될 것이다.

 

끝