[flutter] Flutter Riverpod에서 주문 관리 앱 만들기

14 Dec 2023

flutter

주문 관리 앱은 Riverpod를 사용하여 Flutter로 만들어질 것입니다. Riverpod는 상태 관리 패키지이며, Flutter 앱에서 상태를 관리하기 위한 훌륭한 도구입니다.

필요한 기능

우리의 주문 관리 앱은 몇 가지 핵심 기능을 포함할 것입니다:

주문하기: 사용자가 주문을 생성하고 제출할 수 있는 기능이 필요합니다.
주문 목록 보기: 사용자는 이전 주문 목록을 볼 수 있어야 합니다.
주문 상세 정보 확인: 사용자는 각 주문에 대한 자세한 정보를 확인할 수 있어야 합니다.

Riverpod 설정

먼저, pubspec.yaml 파일의 dependencies 섹션에 Riverpod를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그런 다음, main.dart 파일에서 Riverpod를 초기화하고 상위 수준 Provider를 설정합니다:

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

final orderListProvider = StateProvider<List<Order>>((ref) => []);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '주문 관리 앱',
      home: HomeScreen(),
    );
  }
}

위 코드에서 orderListProvider는 주문 목록을 저장하는 데 사용될 Provider입니다.

주문하기

이제 사용자가 새 주문을 생성하고 제출할 수 있는 기능을 구현해 보겠습니다.

먼저, 새로운 주문을 생성하고 orderListProvider에 추가하는 함수를 만듭니다:

void addNewOrder(Order newOrder, ProviderReference ref) {
  final orderList = ref.read(orderListProvider);
  orderList.state = [...orderList.state, newOrder];
}

다음으로, 주문을 생성하는 화면을 만듭니다:

class NewOrderScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('새 주문')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final newOrder = Order(/* 주문 정보 입력 */);
            addNewOrder(newOrder, context.read);
            Navigator.pop(context); // 화면 닫기
          },
          child: Text('주문 제출'),
        ),
      ),
    );
  }
}

주문 목록 보기 및 상세 정보 확인

마지막으로, 이전 주문 목록을 표시하고 각 주문에 대한 자세한 정보를 확인할 수 있는 기능을 구현합니다.

class OrderListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final orderList = context.read(orderListProvider);

    return Scaffold(
      appBar: AppBar(title: Text('주문 목록')),
      body: ListView.builder(
        itemCount: orderList.length,
        itemBuilder: (context, index) {
          final order = orderList[index];
          return ListTile(
            title: Text(order.title),
            subtitle: Text(order.details),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => OrderDetailScreen(order)),
              );
            },
          );
        },
      ),
    );
  }
}

class OrderDetailScreen extends StatelessWidget {
  final Order order;

  OrderDetailScreen(this.order);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('주문 상세 정보')),
      body: /* 주문 상세 정보를 표시하는 위젯 */,
    );
  }
}

결론

이제 우리의 주문 관리 앱이 Riverpod를 사용하여 구현되었습니다. 사용자는 주문을 생성하고 이전 주문 목록을 볼 수 있으며, 각 주문에 대한 상세 정보를 확인할 수 있습니다.

Riverpod를 이용한 상태 관리는 Flutter 앱을 더욱 간단하게 만들어줍니다. 여러분도 지금 시작해 보세요!

필요한 기능

Riverpod 설정

주문하기

주문 목록 보기 및 상세 정보 확인

결론

참고 자료