[flutter] 플러터 RxDart로 게임 아이템 및 상점 구현하기

05 Dec 2023

flutter

개요

이번 포스트에서는 플러터(Flutter) 앱에서 게임 아이템과 상점을 구현하는 방법에 대해 알아보겠습니다. 이를 위해 RxDart를 사용하여 간단한 아이템 목록과 상점 화면을 만들어보겠습니다.

RxDart란?

RxDart는 자바스크립트의 RxJS와 유사한 반응형 프로그래밍 라이브러리로, 이벤트 스트림을 쉽게 다룰 수 있게 해줍니다. 이를 활용하여 앱의 상태 변화를 추적하고 관리할 수 있습니다.

구현 방법

1. 의존성 추가하기

프로젝트의 ‘pubspec.yaml’ 파일에 다음 라이브러리 의존성을 추가합니다.

dependencies:
  rxdart: ^0.27.1

2. 아이템 클래스 생성하기

게임 아이템을 나타내는 ‘Item’ 클래스를 생성합니다. 이 클래스는 아이템의 이름과 가격을 갖습니다.

class Item {
  String name;
  double price;

  Item(this.name, this.price);
}

3. 아이템 목록 관리하기

‘RxDart’의 ‘BehaviorSubject’ 클래스를 사용하여 아이템 목록을 관리합니다. 이 클래스는 현재 값을 가지고 있으며, 새로운 값을 구독자에게 제공하는 역할을 수행합니다.

import 'package:rxdart/rxdart.dart';

class ItemList {
  BehaviorSubject<List<Item>> _items = BehaviorSubject<List<Item>>.seeded([]);

  Stream<List<Item>> get itemsStream => _items.stream;

  List<Item> get items => _items.value;

  void addItem(Item item) {
    _items.value.add(item);
    _items.add(_items.value);
  }
}

4. 상점 화면 구현하기

새로운 ‘ItemList’ 인스턴스를 생성합니다.
‘itemsStream’을 구독하여 아이템 목록이 변경될 때마다 화면을 업데이트합니다.
‘addItem’ 함수를 호출하여 아이템을 추가합니다.

import 'package:flutter/material.dart';
import 'package:rxdart_example/item.dart';
import 'package:rxdart_example/item_list.dart';

class ShopScreen extends StatelessWidget {
  final ItemList itemList = ItemList();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<Item>>(
      stream: itemList.itemsStream,
      initialData: itemList.items,
      builder: (context, snapshot) {
        final items = snapshot.data;
        return Scaffold(
          appBar: AppBar(
            title: Text('상점'),
          ),
          body: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              final item = items[index];
              return ListTile(
                title: Text(item.name),
                subtitle: Text("\$${item.price.toStringAsFixed(2)}"),
              );
            },
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              final newItem = Item('새로운 아이템', 9.99);
              itemList.addItem(newItem);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('새로운 아이템이 추가되었습니다.'),
                ),
              );
            },
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

결론

이제 RxDart를 활용하여 플러터 앱에서 게임 아이템과 상점을 구현하는 방법을 알아보았습니다. RxDart의 강력한 기능을 활용하면 앱의 상태 변화를 간편하게 관리할 수 있습니다. 이 예제를 참고하여 게임 아이템 및 상점 기능을 더욱 확장해보세요.

개요