[flutter] 플러터 프로바이더를 사용하여 갤러리 앱 만들기

26 Dec 2023

flutter

이번에는 플러터(Flutter)에서 프로바이더(Provider) 패키지를 사용하여 갤러리 앱을 만드는 방법을 살펴보겠습니다.

목표

이 갤러리 앱은 사용자의 사진을 로드하고 표시하는 데모 앱입니다. 또한 사용자는 각 사진을 클릭하여 확대된 이미지를 볼 수 있습니다.

단계

1. 프로바이더 패키지 추가

우선, pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 프로바이더 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0
  # 나머지 의존성

그런 다음 터미널에서 다음 명령으로 패키지를 가져옵니다.

flutter pub get

2. 모델 및 프로바이더 생성

다음 단계는 데이터 모델 및 상태 관리를 위한 프로바이더를 만드는 것입니다. 사용자의 사진을 나타내는 Photo 모델과 그 모델을 관리하는 PhotoProvider 클래스를 작성합니다.

photo.dart

class Photo {
  final String imageUrl;

  Photo({required this.imageUrl});
}

photo_provider.dart

import 'package:flutter/foundation.dart';
import 'photo.dart';

class PhotoProvider extends ChangeNotifier {
  List<Photo> _photos = [];

  List<Photo> get photos => _photos;

  void loadPhotos() {
    // 사진을 가져오는 비동기 로직
    // _photos에 사진 추가
    notifyListeners();
  }
}

3. UI 구성

이제 UI를 구성하고 프로바이더를 사용하여 데이터를 가져와 표시해 봅시다.

gallery_screen.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'photo.dart';
import 'photo_provider.dart';

class GalleryScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('갤러리'),
      ),
      body: Consumer<PhotoProvider>(
        builder: (context, photoProvider, child) {
          if (photoProvider.photos.isEmpty) {
            return Center(child: CircularProgressIndicator());
          } else {
            return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: photoProvider.photos.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    // 이미지 확대 화면으로 네비게이션
                  },
                  child: Image.network(photoProvider.photos[index].imageUrl),
                );
              },
            );
          }
        },
      ),
    );
  }
}

4. 앱 실행

마지막으로, 메인 앱 파일에 프로바이더를 등록하고 시작해 봅시다.

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'photo_provider.dart';
import 'gallery_screen.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => PhotoProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '갤러리 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GalleryScreen(),
    );
  }
}

여기까지 따라오셨다면 이제 갤러리 앱이 실행되고, 프로바이더를 사용하여 데이터를 효율적으로 관리할 수 있게 될 것입니다.

플러터 프로바이더를 사용하면 간단하게 상태를 관리하고 UI를 업데이트할 수 있습니다. 이를 통해 코드를 더 깔끔하게 유지하고 성능을 개선할 수 있습니다.

더 많은 정보를 원하시거나 문제가 있을 경우, 공식 프로바이더 문서를 참조하십시오.