[flutter] 플러터 bloc 패턴을 활용한 사물 인터넷(IoT) 앱 개발 방법

20 Dec 2023

flutter

사물 인터넷(IoT) 앱을 개발하는 경우, 데이터의 효율적인 관리와 상태의 변화에 따른 빠른 대응이 매우 중요합니다. Flutter 앱을 개발할 때 이러한 요구 사항을 충족시키기 위해 Bloc 패턴을 활용할 수 있습니다. Bloc 패턴은 애플리케이션의 상태 관리와 비즈니스 논리를 분리하여 관리하는 디자인 패턴으로, Flutter에서 많은 유연성과 확장성을 제공합니다.

Bloc 패턴의 기본 개념

Bloc 패턴은 애플리케이션을 이벤트, 상태, 그리고 변환 함수로 구성된 세 가지 요소로 분리하여 관리합니다. 사용자 입력이나 외부 데이터의 변화와 같은 이벤트가 발생하면, Bloc은 상태를 업데이트하고 UI를 갱신하여 반응합니다. 이를 통해 코드를 보다 모듈화하고 테스트하기 쉽게 만들며, 복잡한 애플리케이션의 상태 관리를 단순화합니다.

Flutter에서 Bloc 패턴 활용 방법

Flutter에서 Bloc 패턴을 구현하기 위해서는 flutter_bloc 패키지를 활용할 수 있습니다. 이 패키지는 Bloc 패턴 및 상태 관리를 위한 핵심 클래스와 메서드를 제공하여, Flutter 앱의 전반적인 상태 관리를 효율적으로 수행할 수 있습니다.

다음은 Bloc 패턴을 활용하여 Counter 앱을 개발하는 예시 코드입니다.

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

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

// 상태
class CounterState {
  final int count;
  CounterState(this.count);
}

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

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event == CounterEvent.increment) {
      yield CounterState(state.count + 1);
    } else if (event == CounterEvent.decrement) {
      yield CounterState(state.count - 1);
    }
  }
}

void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterBloc(),
      child: CounterApp(),
    ),
  );
}

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              BlocBuilder<CounterBloc, CounterState>(
                builder: (context, state) {
                  return Text(
                    '${state.count}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: () => context.read<CounterBloc>().add(CounterEvent.decrement),
                    tooltip: 'Decrement',
                    child: Icon(Icons.remove),
                  ),
                  FloatingActionButton(
                    onPressed: () => context.read<CounterBloc>().add(CounterEvent.increment),
                    tooltip: 'Increment',
                    child: Icon(Icons.add),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 flutter_bloc 패키지를 이용하여 Counter 앱을 만들었습니다. CounterBloc 클래스는 Bloc 클래스를 상속받아 구현되며, mapEventToState 메서드를 통해 이벤트가 수신되었을 때의 동작을 정의합니다. 그리고 BlocProvider를 통해 Bloc을 앱에 제공하고, BlocBuilder를 통해 상태에 따라 UI를 동적으로 업데이트합니다.

결론

Flutter에서 Bloc 패턴을 활용하면 앱의 상태를 효율적으로 관리할 수 있으며, 비즈니스 로직과 UI를 분리하여 앱을 보다 모듈화하고 확장 가능하게 만들 수 있습니다. 따라서 사물 인터넷(IoT) 앱과 같은 데이터 중심 애플리케이션을 개발하거나 복잡한 상태를 관리해야 하는 앱을 개발할 때 Bloc 패턴을 적극적으로 활용하는 것이 좋습니다.

Bloc 패턴의 기본 개념

Flutter에서 Bloc 패턴 활용 방법

결론

참고 자료