[flutter] 플러터에서 bloc 패턴을 사용하여 포인트 관리 시스템 구현하기

20 Dec 2023

flutter

BLoC(비즈니스 로직 컴포넌트) 패턴은 플러터 애플리케이션에서 상태 관리와 비즈니스 로직을 분리하기 위해 사용됩니다. 이 패턴을 사용하면 코드를 보다 쉽게 유지보수하고 테스트할 수 있으며, 의존성을 분리하여 애플리케이션의 확장성을 향상시킬 수 있습니다. 이번에는 BLoC 패턴을 사용하여 포인트 관리 시스템을 구현하는 방법에 대해 알아보겠습니다.

1. BLoC 패턴 소개

BLoC 패턴은 입력(input)을 처리하는 로직과 UI를 분리하여 비즈니스 로직을 관리하는 방법으로, Stream과 Sink을 사용하여 상태를 제어합니다. 이를 통해 상태의 변화를 추적하고 UI에 반영할 수 있습니다.

2. 포인트 관리 시스템 요구사항

포인트 관리 시스템은 다음과 같은 요구사항을 준수해야 합니다.

사용자의 포인트를 표시해야 합니다.
포인트 적립 및 사용 기능을 제공해야 합니다.

3. BLoC 구현

우선, point_bloc.dart 파일을 만들고 다음과 같이 BLoC 클래스를 구현합니다.

import 'dart:async';

class PointBloc {
  int _points = 0;
  
  final _pointController = StreamController<int>();
  
  Stream<int> get pointStream => _pointController.stream;

  void updatePoints(int points) {
    _points += points;
    _pointController.sink.add(_points);
  }

  void dispose() {
    _pointController.close();
  }
}

final pointBloc = PointBloc();

위 코드는 포인트를 관리하기 위한 간단한 BLoC 클래스를 구현한 것입니다. pointStream을 통해 포인트 변화를 감지하고, updatePoints를 통해 포인트를 업데이트할 수 있습니다.

4. UI와 BLoC 연결

이제 BLoC 클래스를 사용하여 UI와 연결해보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('포인트 관리 시스템'),
        ),
        body: Center(
          child: StreamBuilder<int>(
            stream: pointBloc.pointStream,
            initialData: 0,
            builder: (context, snapshot) {
              return Text('포인트: ${snapshot.data}');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            pointBloc.updatePoints(10);
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위 코드는 BLoC 클래스와 UI를 연결하여 포인트를 표시하고, FloatingActionButton을 통해 포인트를 업데이트하는 예시입니다.

위와 같이 BLoC 패턴을 사용하여 플러터에서 포인트 관리 시스템을 구현할 수 있습니다. BLoC를 활용하면 비즈니스 로직과 UI를 분리하여 유지보수와 확장성을 개선할 수 있습니다.

참고 자료: Flutter BLoC 패턴

목차

1. BLoC 패턴 소개

2. 포인트 관리 시스템 요구사항

3. BLoC 구현

4. UI와 BLoC 연결