[flutter] 플러터에서 bloc 패턴을 사용하여 앱의 네비게이션 관리하기

20 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter) 앱에서 BLoC(Block 파트 분리 및 컨트롤) 패턴을 사용하여 앱의 네비게이션을 관리하는 방법에 대해 알아보겠습니다.

1. BLoC 패턴 소개

BLoC는 Business Logic Component의 약자로, 앱의 비즈니스 로직과 UI를 분리하여 관리하는 디자인 패턴입니다. BLoC 패턴은 플러터 앱의 상태 관리와 상호작용에 적합한 구조를 제공하여 앱을 더 효율적으로 관리할 수 있습니다.

2. BLoC을 사용한 네비게이션 관리

네비게이션을 BLoC을 사용하여 관리하면 다음과 같은 장점이 있습니다.

UI와 비즈니스 로직 분리 : 네비게이션 관련 로직을 별도의 BLoC 클래스에 구현하여 UI와의 분리를 유지합니다.
상태 관리 용이 : BLoC을 통해 현재 화면 및 앱 상태를 효과적으로 관리할 수 있습니다.
테스트 용이성 : BLoC은 단위 테스트가 쉽고 간편하게 수행되도록 도와줍니다.

3. 예제 코드

다음은 BLoC을 사용하여 네비게이션을 관리하는 간단한 예제 코드입니다.

// navigation_bloc.dart
import 'package:bloc/bloc.dart';

enum NavigationEvent { goToHome, goToProfile, goToSettings }

class NavigationBloc extends Bloc<NavigationEvent, String> {
  @override
  String get initialState => "home";

  @override
  Stream<String> mapEventToState(NavigationEvent event) async* {
    switch (event) {
      case NavigationEvent.goToHome:
        yield "home";
        break;
      case NavigationEvent.goToProfile:
        yield "profile";
        break;
      case NavigationEvent.goToSettings:
        yield "settings";
        break;
    }
  }
}

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'navigation_bloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<NavigationBloc>(
      create: (context) => NavigationBloc(),
      child: MaterialApp(
        home: BlocBuilder<NavigationBloc, String>(
          builder: (context, currentPage) {
            switch (currentPage) {
              case "home":
                return HomePage();
              case "profile":
                return ProfilePage();
              case "settings":
                return SettingsPage();
              default:
                return Container();
            }
          },
        ),
      ),
    );
  }
}

4. 마무리

이제 BLoC 패턴을 사용하여 플러터 앱의 네비게이션을 효과적으로 관리하는 방법을 알아보았습니다. BLoC 패턴은 앱의 구조를 더욱 모듈화하고 유지보수하기 쉽게 만들어줍니다.

BLoC 패턴에 대해 더 자세히 알고 싶다면 공식 문서를 참고해보세요.