[flutter] 플러터에서 bloc 패턴을 사용하여 투두리스트 앱 개발

20 Dec 2023

flutter

개요

이 포스트에서는, 플러터(Flutter)를 이용하여 Bloc 패턴을 적용하여 간단한 투두리스트 앱을 개발하는 방법에 대해 다룹니다. Bloc 패턴은 비즈니스 로직을 별도의 모듈로 분리하여, 앱의 복잡성을 줄이고 유지보수를 쉽게 만드는데 도움이 됩니다.

필수 요구사항

Flutter SDK가 설치되어 있어야 합니다.
Dart 언어에 대한 기본 지식이 필요합니다.
Flutter Bloc 패키지를 사용할 것이므로, 해당 패키지에 대한 이해가 필요합니다.

Bloc 패턴 이해

Bloc 패턴은 앱의 비즈니스 로직과 UI를 분리하여 관리하는 디자인 패턴입니다. 앱의 상태 변화를 추적하고, 사용자 입력에 따라 적절한 동작을 수행하는데 사용됩니다. Bloc 패턴을 적용하면 앱의 테스트, 디버깅, 유지보수가 용이해지는 장점이 있습니다.

플러터에서 Bloc 패턴 구현

다음은 간단한 투두리스트 앱에서 Bloc 패턴을 적용하는 과정입니다.

1. Flutter 프로젝트 생성

flutter create todo_list_app
cd todo_list_app

2. Bloc 패키지 의존성 추가

pubspec.yaml 파일에 아래와 같이 flutter_bloc 패키지를 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0

3. Todo 모델 정의

class Todo {
  final String title;
  final bool isCompleted;

  Todo({required this.title, this.isCompleted = false});
}

4. TodoBloc 클래스 구현

import 'package:flutter_bloc/flutter_bloc.dart';

class TodoBloc extends Cubit<List<Todo>> {
  TodoBloc() : super([]);

  void addTodo(Todo todo) {
    emit([...state, todo]);
  }

  void toggleTodo(int index) {
    final List<Todo> todos = List.from(state);
    todos[index] = Todo(
      title: todos[index].title,
      isCompleted: !todos[index].isCompleted,
    );
    emit(todos);
  }
}

5. UI 구현

화면에 대한 코드는 간략하게 제시하겠습니다.

// Todo 입력과 전체 Todo 목록 표시
class TodoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TodoBloc(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Todo List'),
        ),
       // 화면 구성
      ),
    );
  }
}

마무리

위의 단계를 완료하면, Bloc 패턴을 적용한 투두리스트 앱이 완성됩니다. Bloc 패턴은 Flutter 앱의 구조를 보다 모듈화된 형태로 관리할 수 있게 도와주는 강력한 도구입니다.

이번 포스트에서는 Flutter와 Bloc 패턴의 기초에 대해 배우고 간단한 앱을 개발하는 과정을 다뤘습니다. Bloc 패턴을 활용하면 복잡한 앱도 구조적으로 잘 정리된 형태로 개발할 수 있습니다.

더 많은 내용을 공부하고 싶다면, 공식 문서와 다양한 튜토리얼을 참고하는 것이 좋습니다.

개요