[flutter] shared_preferences 를 사용하여 사용자가 선택한 사진을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

shared_preferences는 Flutter에서 데이터를 저장하고 유지하기 위한 편리한 패키지입니다. 이 패키지를 사용하여 사용자가 선택한 사진을 저장하는 방법에 대해 알아보겠습니다.

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

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. 아래와 같이 dependencies 부분에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.5

변경 사항을 적용하기 위해 패키지를 가져오기 위해 터미널에서 flutter pub get 명령을 실행합니다.

2. 이미지 선택 및 저장하기

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

class MyImagePickerPage extends StatefulWidget {
  @override
  _MyImagePickerPageState createState() => _MyImagePickerPageState();
}

class _MyImagePickerPageState extends State<MyImagePickerPage> {
  SharedPreferences sharedPreferences;
  String imagePath;

  @override
  void initState() {
    super.initState();
    loadImage();
  }

  void loadImage() async {
    sharedPreferences = await SharedPreferences.getInstance();
    setState(() {
      imagePath = sharedPreferences.getString('imagePath');
    });
  }

  Future<void> saveImage(String path) async {
    setState(() {
      imagePath = path;
    });

    await sharedPreferences.setString('imagePath', path);
  }

  Future<void> pickImage() async {
    final ImagePicker picker = ImagePicker();
    final PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      saveImage(pickedFile.path);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이미지 선택'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (imagePath != null)
              Image.file(File(imagePath)),
            ElevatedButton(
              onPressed: pickImage,
              child: Text('이미지 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

3. `MyImagePickerPage` 사용하기

이제 위의 코드에서 작성한 MyImagePickerPage를 사용하여 이미지를 선택하고 저장할 수 있습니다. 예를 들어, main.dart 파일에서 MyImagePickerPage를 사용하려면 다음과 같이 작성합니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Picker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyImagePickerPage(),
    );
  }
}

MyImagePickerPage 위젯을 앱의 메인 화면으로 설정하고 실행하면 이미지를 선택하고 저장할 수 있는 앱이 생성됩니다.

여기서 shared_preferences 패키지는 사용자가 선택한 이미지의 경로를 저장하고 로드하는 데 사용됩니다. 사용자가 이미지를 선택하면 이미지의 경로가 shared_preferences에 저장되고, 다음에 앱이 시작될 때 이 경로를 로드하여 이미지를 표시합니다.

이제 shared_preferences를 사용하여 사용자가 선택한 사진을 저장하는 방법을 알게 되었습니다. 이를 통해 간단하게 앱에서 이미지를 유지하고 관리할 수 있습니다.

더 많은 정보와 사용법은 shared_preferences 패키지의 공식 문서를 참고하세요.

Happy coding! 😊

1. shared_preferences 패키지 추가하기

2. 이미지 선택 및 저장하기

3. MyImagePickerPage 사용하기

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

3. `MyImagePickerPage` 사용하기