[Flutter] Nature Image 앱의 코드를 Bloc 패턴으로 리팩토링하는 방법

16 Aug 2023

flutter

앞서 제공한 Nature Image 앱의 코드를 Bloc 패턴으로 리팩토링하는 방법에 대해 설명드리겠습니다.

Bloc 패턴은 Flutter 앱을 더욱 확장성 있고 유지보수가 용이하도록 만드는 패턴 중 하나입니다. 이 패턴은 비즈니스 로직과 UI를 분리하고, 상태를 관리하여 앱의 상태 변화를 추적하고 반영할 수 있습니다.

패키지 추가: Bloc 패턴을 사용하기 위해서는 bloc, flutter_bloc 패키지를 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 다음과 같은 내용을 추가합니다.

`dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4
  bloc: ^7.2.0
  flutter_bloc: ^7.2.0` 

Bloc 클래스 생성: 비즈니스 로직을 처리하는 Bloc 클래스를 생성합니다.

`import 'package:bloc/bloc.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class NatureImageBloc extends Cubit<String> {
  final String apiUrl =
      "https://api.unsplash.com/photos/random?query=nature&orientation=landscape&client_id=<your_access_key>";

  NatureImageBloc() : super('');

  Future<void> loadImage() async {
    try {
      var response = await http.get(Uri.parse(apiUrl));
      var jsonData = json.decode(response.body);
      emit(jsonData['urls']['regular']);
    } catch (e) {
      print(e.toString());
    }
  }
}` 

Bloc Provider 설정: Bloc 클래스를 사용하기 위해, BlocProvider를 설정합니다.

`import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() => runApp(NatureImageApp());

class NatureImageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => NatureImageBloc()..loadImage(),
        child: NatureImagePage(),
      ),
    );
  }
}` 

UI 구성: UI를 구성하는 NatureImagePage 클래스에서 BlocBuilder를 이용하여 UI와 상태를 연결합니다.

`class NatureImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nature Image'),
      ),
      body: Center(
        child: BlocBuilder<NatureImageBloc, String>(
          builder: (context, state) {
            return state.isEmpty
                ? CircularProgressIndicator()
                : Image.network(state);
          },
        ),
      ),
    );
  }
}` 

이제 Bloc 패턴을 적용한 Nature Image 앱이 완성되었습니다. Bloc 패턴을 사용하면 앱의 확장성과 유지보수성이 높아지므로, 복잡한 앱을 만들 때에도 좋은 선택입니다.