[flutter] Flutter Riverpod에서 쇼핑 목록 앱 만들기

14 Dec 2023

flutter

소개
Riverpod 소개
쇼핑 목록 앱 만들기
결론

1. 소개

이번 글에서는 Flutter 프레임워크의 Riverpod 패키지를 활용하여 쇼핑 목록 앱을 만드는 방법에 대해 알아보겠습니다.

2. Riverpod 소개

Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 의존성 주입 라이브러리입니다. Provider 패턴에 기반하며, 가변(mutable) 상태 및 불변(immutable) 상태를 관리할 수 있으며, Provider의 지연 생성 및 비동기 로딩도 지원합니다.

3. 쇼핑 목록 앱 만들기

아래는 쇼핑 목록 앱을 만들기 위한 간략한 예시 코드입니다.

먼저, pubspec.yaml 파일에 Riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

다음으로, 쇼핑 목록 앱의 상태와 로직을 정의합니다.

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

final shoppingListProvider = StateNotifierProvider<ShoppingList, List<String>>((ref) {
  return ShoppingList();
});

class ShoppingList extends StateNotifier<List<String>> {
  ShoppingList() : super([]);

  void addItem(String item) {
    state = [...state, item];
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shopping List'),
        ),
        body: Consumer(builder: (context, watch, child) {
          final shoppingList = watch(shoppingListProvider);
          return ListView.builder(
            itemCount: shoppingList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(shoppingList[index]),
              );
            },
          );
        }),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read(shoppingListProvider.notifier).addItem('New Item');
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

4. 결론

이렇게 Riverpod를 사용하여 쇼핑 목록 앱을 만들었습니다. 이 패키지를 활용하면 의존성 주입과 상태 관리가 용이해지며, 코드의 가독성과 유지보수성을 높일 수 있습니다.

더 많은 정보와 예제는 Riverpod 공식 문서를 참고하시기 바랍니다.