[flutter] 플러터에서 bloc 패턴을 사용하여 게임 점수 기록 기능 구현하기

20 Dec 2023

flutter

플러터(Flutter) 앱에서 게임을 개발하고 게임 점수를 기록하고 싶습니다. 이를 위해 bloc 패턴을 사용하여 효과적으로 상태를 관리하고 게임 점수를 기록하는 방법을 알아보겠습니다.

1. bloc 패턴 소개

bloc은 Business Logic Component의 약자로, 앱의 비즈니스 로직을 위한 디자인 패턴입니다. bloc 패턴은 상태를 변경하고 UI를 업데이트하기 위한 일관된 방법을 제공하여 앱의 상태 관리를 단순화합니다.

2. bloc 라이브러리 설치

먼저, flutter_bloc 라이브러리를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0

그런 다음, 터미널에서 아래 명령을 실행하여 라이브러리를 설치합니다.

flutter pub get

3. ScoreBloc 클래스 구현

게임 점수를 관리하기 위한 ScoreBloc 클래스를 구현합니다.

import 'package:flutter_bloc/flutter_bloc.dart';

enum ScoreEvent { increment, decrement, reset }
const int initialScore = 0;

class ScoreBloc extends Bloc<ScoreEvent, int> {
  ScoreBloc() : super(initialScore);

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

4. ScoreBloc을 사용하여 UI 구현

이제 ScoreBloc을 사용하여 UI를 구현하여 게임 점수를 화면에 표시하고 변경할 수 있습니다.

class ScoreScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ScoreBloc(),
      child: BlocBuilder<ScoreBloc, int>(
        builder: (context, score) {
          return Scaffold(
            appBar: AppBar(
              title: Text('게임 점수'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '현재 점수: $score',
                    style: TextStyle(fontSize: 24),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      context.read<ScoreBloc>().add(ScoreEvent.increment);
                    },
                    child: Text('증가'),
                  ),
                  SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: () {
                      context.read<ScoreBloc>().add(ScoreEvent.decrement);
                    },
                    child: Text('감소'),
                  ),
                  SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: () {
                      context.read<ScoreBloc>().add(ScoreEvent.reset);
                    },
                    child: Text('초기화'),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

5. 게임 점수 기록 결과

이제 ScoreScreen 위젯을 사용하여 게임 화면을 구성하고, bloc 패턴을 통해 게임 점수를 증가, 감소, 초기화할 수 있습니다. 이를 통해 플러터 앱에서 간단하게 게임 점수를 기록하고 관리할 수 있는 방법을 알아보았습니다.

이제 bloc을 사용하여 플러터 앱에서 게임 점수를 효과적으로 관리할 수 있습니다.

참고: flutter_bloc 라이브러리