Colin's Blog
[flutter] 플러터에서의 bloc 패턴으로 주문 및 배송 관리 시스템 구현하기

주문 및 배송 관리 시스템을 만들 때, 플러터(Flutter)의 bloc 패턴을 사용하면 애플리케이션의 상태 관리와 비즈니스 로직을 효과적으로 분리할 수 있습니다. 이번에는 bloc 라이브러리를 사용하여 간단한 주문 및 배송 관리 시스템을 구현하는 방법에 대해 살펴보겠습니다.

1. Bloc 라이브러리 설치

먼저, 플러터 프로젝트에 flutter_bloc 라이브러리를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 flutter_bloc 의존성을 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0

의존성을 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받습니다.

2. 주문 및 배송 관리 시스템 구현

2.1. 이벤트와 상태 정의

먼저, events와 states를 정의합니다. 주문과 배송 상태를 나타내는 클래스를 만들고 각각의 이벤트와 상태를 정의합니다.

// order_event.dart

import 'package:equatable/equatable.dart';

abstract class OrderEvent extends Equatable {
  const OrderEvent();

  @override
  List<Object> get props => [];
}

class PlaceOrder extends OrderEvent {
  final String item;

  PlaceOrder(this.item);

  @override
  List<Object> get props => [item];
}

// delivery_event.dart

import 'package:equatable/equatable.dart';

abstract class DeliveryEvent extends Equatable {
  const DeliveryEvent();

  @override
  List<Object> get props => [];
}

class UpdateDeliveryStatus extends DeliveryEvent {
  final bool isDelivered;

  UpdateDeliveryStatus(this.isDelivered);

  @override
  List<Object> get props => [isDelivered];
}

// order_state.dart

import 'package:equatable/equatable.dart';

abstract class OrderState extends Equatable {
  const OrderState();

  @override
  List<Object> get props => [];
}

class OrderPlaced extends OrderState {
  final String item;

  OrderPlaced(this.item);

  @override
  List<Object> get props => [item];
}

// delivery_state.dart

import 'package:equatable/equatable.dart';

abstract class DeliveryState extends Equatable {
  const DeliveryState();

  @override
  List<Object> get props => [];
}

class DeliveryUpdated extends DeliveryState {
  final bool isDelivered;

  DeliveryUpdated(this.isDelivered);

  @override
  List<Object> get props => [isDelivered];
}

2.2. Bloc 클래스 구현

이제 bloc 클래스를 만들어 비즈니스 로직을 구현합니다.

// order_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';
import 'order_event.dart';
import 'order_state.dart';

class OrderBloc extends Bloc<OrderEvent, OrderState> {
  OrderBloc() : super(OrderInitial());

  @override
  Stream<OrderState> mapEventToState(OrderEvent event) async* {
    if (event is PlaceOrder) {
      // Place order logic
      yield OrderPlaced(event.item);
    }
  }
}

// delivery_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';
import 'delivery_event.dart';
import 'delivery_state.dart';

class DeliveryBloc extends Bloc<DeliveryEvent, DeliveryState> {
  DeliveryBloc() : super(DeliveryInitial());

  @override
  Stream<DeliveryState> mapEventToState(DeliveryEvent event) async* {
    if (event is UpdateDeliveryStatus) {
      // Update delivery status logic
      yield DeliveryUpdated(event.isDelivered);
    }
  }
}

2.3. 화면과 Bloc 연결

마지막으로, 화면과 BlocProvider를 사용하여 구현한 Bloc을 연결합니다.

// main.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'order_bloc.dart';
import 'delivery_bloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultiBlocProvider(
        providers: [
          BlocProvider<OrderBloc>(
            create: (BuildContext context) => OrderBloc(),
          ),
          BlocProvider<DeliveryBloc>(
            create: (BuildContext context) => DeliveryBloc(),
          ),
        ],
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('주문 및 배송 관리 시스템'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                BlocProvider.of<OrderBloc>(context).add(PlaceOrder('Item A'));
              },
              child: Text('주문하기'),
            ),
            ElevatedButton(
              onPressed: () {
                BlocProvider.of<DeliveryBloc>(context).add(UpdateDeliveryStatus(true));
              },
              child: Text('배송완료 처리'),
            ),
          ],
        ),
      ),
    );
  }
}

결론

플러터의 flutter_bloc 라이브러리를 사용하여 주문 및 배송 관리 시스템을 구현하는 방법에 대해 살펴보았습니다. bloc 패턴을 통해 상태 관리와 비즈니스 로직을 효율적으로 분리하여 애플리케이션의 유지 보수성을 높일 수 있습니다.

이외에도 실제 서비스에 적용되어 있는 다양한 기술들을 살펴볼 수 있으니 참고해 보시기 바랍니다.

참고 자료

© 2018 Colin. All rights reserved.