[flutter] 플러터에서 path_provider를 이용하여 이미지 저장하기

30 Nov 2023

flutter

플러터는 모바일 앱 개발을 위한 크로스 플랫폼 프레임워크입니다. 앱에서 이미지를 다운로드하거나 사용자가 업로드한 이미지를 저장해야하는 경우가 있습니다. 이때 path_provider 패키지는 앱에서 파일 및 디렉토리 경로를 확인하고 관리하는 데 유용합니다. 이 글에서는 path_provider를 사용하여 플러터 앱에서 이미지를 저장하는 방법을 알아보겠습니다.

1. `path_provider` 패키지 추가하기

먼저 pubspec.yaml 파일에 path_provider 패키지를 추가해야합니다. 아래 코드를 dependencies 섹션에 추가합니다.

dependencies:
  path_provider: ^2.0.1

그런 다음 터미널에서 flutter pub get 명령을 실행하여 패키지를 가져옵니다.

2. 이미지 저장하기

아래와 같은 코드를 사용하여 이미지를 저장할 수 있습니다.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart' as path_provider;

class ImageSaveScreen extends StatelessWidget {
  final String imageUrl;

  ImageSaveScreen({required this.imageUrl});

  Future<void> saveImage() async {
    var response = await HttpClient().getUrl(Uri.parse(imageUrl));
    var bytes = await response.close();
    
    var dir = await path_provider.getTemporaryDirectory();
    var fileName = path.basename(imageUrl);
    var file = File("${dir.path}/$fileName");
    await file.writeAsBytes(bytes);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("이미지 저장하기"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("이미지 저장"),
          onPressed: saveImage,
        ),
      ),
    );
  }
}

위의 코드에서 saveImage() 메서드에서는 주어진 이미지 URL을 사용하여 이미지를 다운로드하고, 임시 디렉토리 경로를 가져와 해당 경로에 이미지를 저장합니다.

3. 이미지 저장 화면 사용하기

위에서 만든 ImageSaveScreen 위젯을 사용하여 이미지 저장 화면을 구성할 수 있습니다. 예를 들어, 다음과 같이 다른 화면에서 이미지 저장 화면을 호출할 수 있습니다.

import 'package:flutter/material.dart';

import 'image_save_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '이미지 저장',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final imageUrl = "https://example.com/image.jpg";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("이미지 저장"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("이미지 저장 화면으로 이동"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ImageSaveScreen(imageUrl: imageUrl),
              ),
            );
          },
        ),
      ),
    );
  }
}

위의 코드에서 HomeScreen에서는 이미지 저장 화면으로 이동하는 버튼을 생성하고, 해당 버튼이 클릭되면 ImageSaveScreen 위젯을 호출합니다. ImageSaveScreen은 imageUrl 인자를 통해 이미지 URL을 전달받습니다.

이제 앱을 실행하고 “이미지 저장 화면으로 이동” 버튼을 클릭하면 이미지가 다운로드되고 임시 디렉토리에 저장됨을 확인할 수 있습니다.

이상으로 플러터에서 path_provider 패키지를 이용하여 이미지를 저장하는 방법에 대해 알아보았습니다. path_provider는 앱에서 파일 시스템을 다루는 다양한 상황에서 유용하게 사용될 수 있으므로, 필요한 기능에 맞게 활용해보세요. 참고자료로 path_provider 패키지의 공식 문서를 확인해보시기 바랍니다.

1. path_provider 패키지 추가하기

2. 이미지 저장하기

3. 이미지 저장 화면 사용하기

1. `path_provider` 패키지 추가하기