Colin's Blog
[flutter] 플러터에서 블록 패턴을 사용한 앱 개발 방법

블록 패턴(Block Pattern)은 플러터(Flutter) 앱 개발에서 상태 관리를 위해 자주 사용되는 패턴 중 하나입니다. 이 패턴을 사용하면 앱의 데이터 흐름을 쉽게 관리하고 ​​상태 변화를 추적할 수 있습니다.

블록 패턴 소개

블록 패턴은 입력, 처리, 출력을 분리하여 데이터를 다루는 패턴으로, 주로 비동기 작업이 필요한 상태 관리에 사용됩니다. 주요 구성 요소는 블록(block), 이벤트(event), 상태(state)로 구성됩니다.

플러터에서 블록 패턴 사용하기

플러터에서 블록 패턴을 사용하려면 먼저 bloc 라이브러리를 사용해야 합니다. 이 라이브러리를 사용하면 간단하면서도 강력한 블록 패턴을 구현할 수 있습니다.

단계 1: bloc 패키지 추가

먼저 pubspec.yaml 파일에 bloc 및 flutter_bloc 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  bloc: ^7.0.0
  flutter_bloc: ^7.0.0

그런 다음, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

단계 2: 블록 및 이벤트 생성

다음으로, 필요에 따라 블록 및 이벤트를 생성합니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 증가하는 카운터 앱을 만든다고 가정해 봅시다.

// counter_event.dart

import 'package:equatable/equatable.dart';

abstract class CounterEvent extends Equatable {
  const CounterEvent();
}

class IncrementEvent extends CounterEvent {
  @override
  List<Object> get props => [];
}

class DecrementEvent extends CounterEvent {
  @override
  List<Object> get props => [];
}

단계 3: 블록 생성

이제 블록을 만들고 비즈니스 로직을 구현합니다.

// counter_bloc.dart

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

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

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield state + 1;
    } else if (event is DecrementEvent) {
      yield state - 1;
    }
  }
}

단계 4: 블록 위젯과 상태 관리

마지막으로, 블록을 위젯에 통합하고 상태를 관리합니다.

// main.dart

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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, int>(
              builder: (context, state) {
                return Text(
                  '$state',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              BlocProvider.of<CounterBloc>(context).add(IncrementEvent());
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              BlocProvider.of<CounterBloc>(context).add(DecrementEvent());
            },
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

이제 블록 패턴이 적용된 앱을 플러터에서 개발할 수 있습니다. 블록 패턴을 통해 앱 상태를 효율적으로 관리하여 개발 생산성을 높일 수 있습니다.

위의 예시는 간단한 카운터 앱을 기반으로 설명되었지만, 실제 프로젝트에서는 상태 관리가 더 복잡해질 수 있습니다. 블록 패턴은 이러한 복잡성을 효과적으로 다룰 수 있는 도구입니다.

그외에도 블록 패턴의 활용 방법이나 주의할 점에 대해 더 깊이 있게 알아보고 싶다면 추가 자료를 참고하시기 바랍니다.

참고 자료:

© 2018 Colin. All rights reserved.