[flutter] 플러터에서의 bloc 패턴으로 요리 레시피 앱 개발하기

20 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 모바일 앱 개발 프레임워크로, 블록 패턴을 사용하여 상태 관리를 할 수 있습니다. 이번에는 플러터를 사용해서 요리 레시피 앱을 개발해보겠습니다.

1. 블록 패턴 소개

블록 패턴은 플러터 앱에서 상태를 관리하기 위한 디자인 패턴 중 하나입니다. 블록은 비즈니스 로직과 상태를 관리하는 모듈이며, 이벤트는 블록에 전달되는 입력을 나타냅니다.

2. 요리 레시피 앱 구상

요리 레시피 앱은 다양한 레시피를 보여주고, 사용자가 레시피를 선택하면 해당 레시피의 상세 정보를 보여줍니다. 사용자는 레시피를 찜할 수도 있어야 합니다.

3. 플러터 프로젝트 설정

플러터 프로젝트를 생성하고, 필요한 의존성을 추가하여 프로젝트를 초기화합니다.

flutter create recipe_app
cd recipe_app

4. 요리 레시피 모델 및 데이터

요리 레시피를 표현하는 모델 클래스를 만들고, 레시피 데이터를 모의로 생성합니다.

class Recipe {
  final String name;
  final String description;
  final bool isFavorite;

  Recipe({required this.name, required this.description, this.isFavorite = false});
}

5. 블록 및 이벤트 만들기

요리 레시피 목록을 가져오거나, 레시피를 찜하는 등의 동작을 수행하는 블록과 이벤트를 만들어야 합니다. 또한, 블록에서 상태를 업데이트하는 방법도 정의해야 합니다.

// 레시피 블록
class RecipeBloc extends Bloc<RecipeEvent, List<Recipe>> {
  // 초기 상태 설정
  @override
  List<Recipe> get initialState => [];

  // 이벤트를 처리하여 상태를 업데이트
  @override
  Stream<List<Recipe>> mapEventToState(RecipeEvent event) async* {
    if (event is LoadRecipes) {
      // 레시피 목록을 가져와서 상태 업데이트
      yield _getRecipes();
    } else if (event is ToggleFavorite) {
      // 레시피를 찜하기
      yield _toggleFavorite(event.recipe);
    }
  }

  // 레시피 데이터 로딩
  List<Recipe> _getRecipes() {
    // 실제 데이터 로딩 로직
    // ...
  }

  // 레시피 찜 여부 토글
  List<Recipe> _toggleFavorite(Recipe recipe) {
    // 찜 여부 업데이트 로직
    // ...
  }
}

// 레시피 이벤트
abstract class RecipeEvent {}

class LoadRecipes extends RecipeEvent {}

class ToggleFavorite extends RecipeEvent {
  final Recipe recipe;

  ToggleFavorite(this.recipe);
}

6. UI 구현

요리 레시피 목록을 보여주고, 레시피 상세 정보를 표시하는 UI를 구현합니다. 또한, 레시피를 찜하는 기능도 UI에 반영해야 합니다.

// 요리 레시피 목록 화면
class RecipeListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 레시피 블록 인스턴스 생성
    final recipeBloc = BlocProvider.of<RecipeBloc>(context);

    return Scaffold(
      // 요리 레시피 목록을 표시하는 UI 구현
      // ...
    );
  }
}

// 레시피 상세 화면
class RecipeDetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 레시피 블록 인스턴스 생성
    final recipeBloc = BlocProvider.of<RecipeBloc>(context);

    return Scaffold(
      // 레시피 상세 정보를 표시하는 UI 구현
      // ...
    );
  }
}

7. 블록과 UI 연결

블록과 UI를 연결하여 블록에서 발생한 상태 변경을 UI에 반영하고, UI에서 발생한 사용자 입력을 블록으로 전달합니다.

// 요리 레시피 목록 화면
class RecipeListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final recipeBloc = BlocProvider.of<RecipeBloc>(context);

    return BlocBuilder<RecipeBloc, List<Recipe>>(
      builder: (context, recipeList) {
        // 레시피 목록 상태를 기반으로 UI를 빌드
        // ...
      },
    );
  }
}

// 레시피 상세 화면
class RecipeDetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final recipeBloc = BlocProvider.of<RecipeBloc>(context);

    return BlocBuilder<RecipeBloc, List<Recipe>>(
      builder: (context, recipeList) {
        // 레시피 상세 정보와 찜 기능 UI를 빌드
        // ...
      },
    );
  }
}

8. 결론

이렇게 블록 패턴과 플러터를 사용하여 요리 레시피 앱을 개발해보았습니다. 블록 패턴을 통해 상태 관리를 효율적으로 할 수 있고, UI와 비즈니스 로직을 분리할 수 있어 유지 보수성이 높아집니다.

블록 패턴과 플러터의 조합을 통해 복잡한 상태 관리 문제를 해결할 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다.

이제 여러분도 플러터와 블록 패턴을 사용하여 다양한 앱을 개발해보세요!

참고문헌:

https://bloclibrary.dev
https://flutter.dev/docs/cookbook

목차