[flutter] 플러터에서 bloc 패턴을 사용하여 채팅 기능 구현하기

20 Dec 2023

flutter

채팅 기능은 애플리케이션에서 중요한 요소 중 하나입니다. 이번에는 플러터에서 bloc (Business Logic Component) 패턴을 사용하여 채팅 기능을 구현하는 방법에 대해 알아보겠습니다. bloc 패턴은 코드를 재사용하고 유지보수하기 쉽게 만들어주며, 복잡한 상태 관리를 단순하게 만들어줍니다.

1. Flutter Bloc 라이브러리 추가

먼저, flutter_bloc 패키지를 애플리케이션에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0

그런 다음 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. Bloc 및 이벤트, 상태 클래스 생성

채팅 기능을 위한 ChatBloc 클래스와 해당 이벤트, 상태 클래스를 생성합니다.

import 'package:flutter_bloc/flutter_bloc.dart';

// 이벤트
abstract class ChatEvent {}

class SendMessageEvent extends ChatEvent {
  final String message;
  SendMessageEvent(this.message);
}

// 상태
abstract class ChatState {}

class ChatInitialState extends ChatState {}

class ChatLoadedState extends ChatState {
  final List<String> messages;
  ChatLoadedState(this.messages);
}

// Bloc
class ChatBloc extends Bloc<ChatEvent, ChatState> {
  ChatBloc() : super(ChatInitialState());

  @override
  Stream<ChatState> mapEventToState(ChatEvent event) async* {
    if(event is SendMessageEvent) {
      // 새 메시지를 전송하는 로직
      List<String> updatedMessages = []; // 메시지 업데이트 로직
      yield ChatLoadedState(updatedMessages);
    }
  }
}

3. 화면에 Bloc 연결

채팅 화면에서 위에서 생성한 ChatBloc을 연결하고 상태에 따라 UI를 업데이트할 수 있습니다.

class ChatScreen extends StatelessWidget {
  final ChatBloc chatBloc;
  
  ChatScreen({this.chatBloc});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) => chatBloc,
      child: BlocBuilder<ChatBloc, ChatState>(
        builder: (context, state) {
          if(state is ChatInitialState) {
            return CircularProgressIndicator();
          } else if(state is ChatLoadedState) {
            return ListView.builder(
              itemCount: state.messages.length,
              itemBuilder: (context, index) {
                return Text(state.messages[index]);
              },
            );
          }
        },
      ),
    );
  }
}

이제 ChatScreen 위젯에서 채팅 기능을 렌더링하고, ChatBloc을 사용하여 이벤트를 처리하고 상태를 관리할 수 있습니다.

이와 같이 bloc 패턴을 사용하여 플러터 애플리케이션에서 채팅 기능을 구현할 수 있습니다.

더 많은 정보를 원한다면 아래 레퍼런스를 참고하세요.

레퍼런스:

flutter_bloc 라이브러리

Note: 본 문서에 작성된 코드는 예시일 뿐이며, 실제 사용 시에는 안정성과 보안을 고려하여 코드를 작성해야 합니다.