[flutter] 플러터 프로바이더를 사용하여 사진 편집하기

22 Dec 2023

flutter

사진을 편집하는 기능은 모바일 애플리케이션에서 매우 중요합니다. 사용자가 사진을 촬영하거나 선택한 후 편집할 수 있는 기능을 제공하는 것은 매우 중요합니다. 이를 위해 플러터에서는 provider 패키지를 사용하여 상태 관리를 하고, image_picker 패키지를 사용하여 사진을 가져올 수 있습니다.

사진을 가져오기

우선, image_picker 패키지를 사용하여 사용자가 사진을 선택할 수 있도록 합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final ImagePicker _picker = ImagePicker();

  Future<void> _selectImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
	// Selected image will be used for editing
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Editor'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _selectImage,
          child: Text('Select Image'),
        ),
      ),
    );
  }
}

위 코드를 실행하면 앱이 실행되고 ‘Select Image’ 버튼을 누르면 갤러리에서 이미지를 선택할 수 있는 화면이 열립니다.

이미지 편집하기

사진을 선택한 후, 사용자가 편집할 수 있도록 하는 워크플로우를 작성해보겠습니다. 다음은 사진을 편집하기 위해 photo_view 패키지를 사용하는 예제입니다.

import 'package:photo_view/photo_view.dart';

class EditPhotoPage extends StatelessWidget {

  final XFile image; // Selected image to be edited

  EditPhotoPage(this.image);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Photo'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.done),
            onPressed: () {
              // Save the edited image
            },
          ),
        ],
      ),
      body: PhotoView(
        imageProvider: FileImage(File(image.path)),
      ),
    );
  }
}

위 코드에서는 photo_view 패키지를 사용하여 선택한 이미지를 보여주고, 사용자가 편집한 후 ‘Save’ 버튼을 누르면 편집된 이미지를 저장하는 기능을 구현했습니다.

결론

이제 provider 패키지를 사용하여 선택한 이미지 및 편집한 이미지와 관련된 상태를 관리하여 전체적인 편집 워크플로우를 완성할 수 있습니다. 사용자가 사진을 선택하고 편집하는 동안의 경험을 향상시키기 위해 다양한 기능을 추가할 수 있습니다.

참고 문헌:

https://pub.dev/packages/image_picker
https://pub.dev/packages/photo_view