[flutter] 플러터에서의 bloc 패턴으로 앱의 전역 데이터 공유하기

20 Dec 2023

flutter

Flutter 앱을 개발하다 보면 여러 페이지나 위젯 간에 데이터를 효율적으로 공유해야 하는 경우가 많습니다. 이를 위해 Bloc 패턴을 사용하여 앱의 전역 데이터를 관리할 수 있습니다.

Bloc 패턴이란?

Bloc은 Business Logic Component의 약자로, Flutter 앱에서 상태 및 이벤트를 처리하기 위한 패턴입니다. 이를 사용하면 앱의 상태를 관리하고 상태 변화를 감지하여 UI를 업데이트할 수 있습니다.

Bloc 패턴은 크게 이벤트, 상태, 로직으로 구성됩니다. 이벤트는 UI에서 발생하는 사용자의 액션을 나타내고, 상태는 앱의 상태를 의미하며, 로직은 이벤트를 상태로 변환하는 역할을 합니다.

Flutter에서 Bloc 패턴 사용하기

Flutter에서 Bloc 패턴을 사용하기 위해서는 flutter_bloc 패키지를 설치해야 합니다. 아래는 간단한 Counter 앱을 Bloc 패턴으로 구현한 예제 코드입니다.

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

// 이벤트
enum CounterEvent { increment, decrement }

// 블록
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
      case CounterEvent.decrement:
        yield state - 1;
        break;
    }
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterBloc _counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Bloc Counter'),
      ),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, state) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Counter',
                ),
                Text(
                  '$state',
                  style: Theme.of(context).textTheme.headline4,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    FloatingActionButton(
                      onPressed: () {
                        _counterBloc.add(CounterEvent.decrement);
                      },
                      tooltip: 'Decrement',
                      child: Icon(Icons.remove),
                    ),
                    FloatingActionButton(
                      onPressed: () {
                        _counterBloc.add(CounterEvent.increment);
                      },
                      tooltip: 'Increment',
                      child: Icon(Icons.add),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

위의 코드에서 CounterBloc 클래스는 Bloc을 상속하여 구현되었습니다. CounterEvent를 사용하여 이벤트를 정의하고, mapEventToState 메서드를 통해 이벤트를 상태로 변환합니다.

앱이 화면에 렌더링될 때 BlocProvider를 통해 CounterBloc을 제공하고, BlocBuilder를 사용하여 CounterBloc의 상태를 감지하여 UI를 업데이트합니다.

이와 같이 Bloc 패턴을 사용하면 앱 전역에서 상태를 효율적으로 관리할 수 있으며, 여러 위젯 간의 데이터 공유가 용이해집니다.

결론

Flutter에서 Bloc 패턴을 사용하여 앱의 전역 데이터를 효율적으로 관리하고 상태 변화를 감지하여 UI를 업데이트할 수 있습니다. Bloc 패턴을 적절히 활용하면 앱의 유지보수성과 확장성을 향상시킬 수 있습니다.

참고 자료

본 포스트는 [flutter] 플러터에서의 bloc 패턴으로 앱의 전역 데이터 공유하기에 대한 내용을 담고 있습니다.