[flutter] 플러터에서의 bloc 패턴으로 음식 추천 앱 개발하기

20 Dec 2023

flutter

소개

이번 포스트에서는 플러터(Flutter)를 사용하여 음식 추천 앱을 개발해보겠습니다. 이 앱은 사용자에게 랜덤한 음식을 추천해주는 기능을 제공할 것입니다. 또한, bloc 패턴을 사용하여 상태 관리를 구현할 것입니다.

bloc 패턴이란

bloc 패턴은 플러터 애플리케이션에서 상태 관리를 단순하게 만들어주는 패턴입니다. 이 패턴은 비즈니스 로직을 애플리케이션의 상태와 분리하여 관리할 수 있게 해줍니다.

프로젝트 설정

먼저, 음식 추천 앱 프로젝트를 생성하고 flutter_bloc 패키지를 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0

bloc 및 이벤트 클래스 생성

다음으로, RecommendationBloc 및 RecommendationEvent 클래스를 생성합니다. RecommendationEvent 클래스는 사용자 액션을 나타내고, RecommendationBloc 클래스는 해당 액션에 대한 상태를 업데이트합니다.

class RecommendationEvent {}

class RandomFoodRequested extends RecommendationEvent {}

class RecommendationState {}

class FoodRecommended extends RecommendationState {
  final String food;

  FoodRecommended(this.food);
}

class RecommendationBloc extends Bloc<RecommendationEvent, RecommendationState> {
  RecommendationBloc() : super(FoodRecommended(''));
}

bloc 위젯 구현

이제, RecommendationBloc을 사용하여 화면에 음식을 표시하는 bloc 위젯을 구현합니다.

class RecommendationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => RecommendationBloc(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('음식 추천'),
        ),
        body: BlocBuilder<RecommendationBloc, RecommendationState>(
          builder: (context, state) {
            if (state is FoodRecommended) {
              return Center(
                child: Text(state.food),
              );
            }
            return CircularProgressIndicator();
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            BlocProvider.of<RecommendationBloc>(context).add(RandomFoodRequested());
          },
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

결론

이제 음식 추천 앱의 기본 기능을 bloc 패턴을 사용하여 구현했습니다. bloc 패턴을 통해 상태 관리와 비즈니스 로직을 분리하여 유지보수가 쉬운 코드를 작성할 수 있습니다. 여러분도 bloc 패턴을 사용하여 플러터 앱을 개발해보세요!

이상으로 음식 추천 앱을 개발하는 방법에 대해 알아보았습니다. 감사합니다.