[flutter] 플러터에서의 bloc 패턴으로 영양 정보 앱 개발하기

20 Dec 2023

flutter

플러터(Flutter)를 사용하여 앱을 개발하다 보면 사용자 인터페이스, 비즈니스 로직, 데이터 관리 등을 적절하게 분리하여 관리하고자 할 때가 있습니다. Bloc (Business Logic Component) 패턴을 사용하면 앱의 구조를 쉽게 유지보수할 수 있고, 코드의 재사용성을 높일 수 있습니다.

이번 포스트에서는 플러터에서 Bloc 패턴을 활용하여 영양 정보를 제공하는 앱을 개발하는 방법을 알아보겠습니다.

1. Bloc 라이브러리 설치하기

Bloc 패턴을 쉽게 구현할 수 있도록 도와주는 flutter_bloc 라이브러리를 사용하겠습니다. pubspec.yaml 파일에 다음과 같이 라이브러리를 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0

이후 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

2. Bloc 및 이벤트, 상태 정의하기

import 'package:flutter_bloc/flutter_bloc.dart';

// 영양 정보 이벤트
enum NutritionEvent { fetchNutritionInfo }

// 영양 정보 상태
class NutritionState {
  final String nutritionInfo;

  const NutritionState(this.nutritionInfo);
}

3. Bloc 클래스 구현하기

class NutritionBloc extends Bloc<NutritionEvent, NutritionState> {
  NutritionBloc() : super(const NutritionState(''));

  @override
  Stream<NutritionState> mapEventToState(NutritionEvent event) async* {
    if (event == NutritionEvent.fetchNutritionInfo) {
      // 영양 정보를 가져와서 상태를 업데이트합니다.
      yield NutritionState('...');
    }
  }
}

4. BlocProvider를 통해 Bloc 제공하기

BlocProvider(
  create: (context) => NutritionBloc(),
  child: YourApp(),
)

위와 같이 Bloc 패턴을 사용하여 영양 정보를 제공하는 앱을 개발할 수 있습니다. Bloc 패턴을 사용하면 비즈니스 로직과 화면 표시를 깔끔하게 분리하여 유지보수가 쉬워지며, 확장성을 높일 수 있습니다.

참고 문헌: