[flutter] Flutter Riverpod에서 사진 앨범 앱 만들기

14 Dec 2023

flutter

Riverpod은 Flutter 앱에서 상태 관리를 위한 좋은 도구입니다. 이제 우리는 Riverpod을 사용하여 간단한 사진 앨범 앱을 만들 수 있습니다.

단계 1: 프로젝트 설정하기

먼저, pubspec.yaml 파일에 riverpod을 추가합니다.

dependencies:
  riverpod: ^1.0.3

그런 다음, pubspec.yaml 파일을 저장한 다음, 터미널에서 flutter pub get을 실행하여 새로운 종속성을 가져옵니다.

단계 2: Riverpod Provider 생성하기

다음으로, Riverpod Provider를 사용하여 앨범 정보를 가져와야 합니다. 아래와 같이 gallery_provider.dart 파일을 생성합니다.

import 'package:riverpod/riverpod.dart';

final galleryProvider = FutureProvider<List<String>>((ref) async {
  // 앨범 정보를 가져오는 비동기 함수를 호출하는 코드
  // 예: 사진 앨범 앱을 만들 때는 device_gallery 사용
});

단계 3: UI 생성하기

이제, Riverpod을 사용하여 UI를 만들어야 합니다. 아래는 gallery_screen.dart의 코드 일부입니다.

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

final galleryProvider = ...; // 앞에서 만든 provider

class GalleryScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('사진 앨범'),
      ),
      body: Consumer(
        builder: (context, watch, child) {
          final images = watch(galleryProvider); // Provider로부터 데이터 가져오기
          return images.when(
            loading: () => CircularProgressIndicator(),
            error: (error, stackTrace) => Text('에러: $error'),
            data: (imageList) => ListView.builder(
              itemCount: imageList.length,
              itemBuilder: (context, index) {
                return Image.network(imageList[index]);
              },
            ),
          );
        },
      ),
    );
  }
}

단계 4: 메인 앱에서 사용하기

마지막으로, 위에서 만든 GalleryScreen을 메인 앱에서 사용합니다.

import 'package:flutter/material.dart';

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

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

이제 Flutter Riverpod에서 간단한 사진 앨범 앱을 만들었습니다. 물론 실제로는 사진 앨범에 접근하기 위한 추가 작업이 필요할 수 있습니다. 이를 위해 device_gallery 플러그인을 사용할 수 있습니다. 문서를 참조하여 해당 플러그인을 추가하여 실제 사진 앨범과 통합할 수 있습니다.