[flutter] Flutter Riverpod에서 패션 스타일링 앱 만들기

14 Dec 2023

flutter

Riverpod은 Flutter에서 상태 관리를 위한 강력한 도구로, 이를 활용하여 패션 스타일링 앱을 만들어보겠습니다. 이 앱은 사용자가 옷과 액세서리를 조합해보고 스타일링을 연습할 수 있는 실용적인 기능을 제공합니다.

Riverpod 설정

먼저 pubspec.yaml 파일에 다음과 같이 riverpod을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0+3

그런 다음, main.dart 파일에서 Riverpod을 초기화하고 프로바이더를 등록합니다:

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

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

final outfitProvider = StateNotifierProvider((ref) => OutfitNotifier());

패션 아이템 데이터 모델

앱에서 사용할 패션 아이템의 데이터 모델을 만들어보겠습니다.

class FashionItem {
  final String id;
  final String name;
  final String category;
  final String imageUrl;

  FashionItem({
    required this.id,
    required this.name,
    required this.category,
    required this.imageUrl,
  });
}

상태 변경을 위한 Notifier 작성

다음으로, 상태를 변경하는 Notifier를 작성합니다.

class OutfitNotifier extends StateNotifier<List<FashionItem>> {
  OutfitNotifier() : super([]);

  void addNewItem(FashionItem newItem) {
    state = [...state, newItem];
  }

  void removeItem(String itemId) {
    state = state.where((item) => item.id != itemId).toList();
  }
}

UI 구성

이제 UI를 설계하고 상태를 변경하는 UI 레이어와 연결합니다. 이때, Consumer 위젯을 사용하여 상태 변화를 관찰하고, Provider 위젯을 통해 상태를 제공합니다.

아래는 패션 아이템을 표시하고 조작하는 간단한 예시입니다:

Consumer(
  builder: (context, watch, child) {
    final outfit = watch(outfitProvider);
    return ListView.builder(
      itemCount: outfit.length,
      itemBuilder: (context, index) {
        final item = outfit[index];
        return ListTile(
          leading: Image.network(item.imageUrl),
          title: Text(item.name),
          onTap: () {
            context.read(outfitProvider.notifier).removeItem(item.id);
          },
        );
      },
    );
  },
)

결론

Riverpod을 사용하여 Flutter 앱에 상태 관리 기능을 추가하는 방법을 살펴보았습니다. 이를 활용하여 패션 스타일링 앱을 만들었는데, 이제 여러분들은 이를 확장하고 보다 다양한 기능을 추가할 수 있습니다.

더 많은 정보를 원하시면 Riverpod 공식 문서를 참고하세요.