[Flutter] Flutter와 BLoC 패턴을 사용하여 음악 리스트 예제

16 Aug 2023

flutter

Flutter와 BLoC 패턴을 사용하여 음악 리스트를 가져오는 앱을 만드는 기본적인 단계를 안내해 드릴게요. 여기서는 애플 음악 API를 사용하는 대신 가상의 음악 리스트를 사용할 것입니다. 실제 API를 사용하려면 해당 API의 사용 방법을 숙지하고 키를 발급받아야 합니다.

Flutter 프로젝트 생성: Flutter가 설치되어 있는지 확인하고, 새로운 프로젝트를 생성합니다.

    `flutter create apple_music_app
    cd apple_music_app` 

의존성 추가: 프로젝트의 pubspec.yaml 파일에 BLoC 및 HTTP 패키지를 추가합니다.

    `dependencies:
      flutter:
        sdk: flutter
      bloc: ^8.0.1
      flutter_bloc: ^8.0.1
      http: ^0.13.3` 

의존성을 추가한 후에는 `flutter pub get` 명령을 실행하여 패키지를 가져옵니다.

BLoC 생성: 먼저, 앱 상태와 관련된 BLoC 클래스를 생성합니다. lib 폴더에 bloc 디렉토리를 만들고 그 안에 music_bloc.dart 파일을 생성합니다.

    
    `import 'package:bloc/bloc.dart';
    import 'package:http/http.dart' as http;
    
    // 이벤트 클래스
    abstract class MusicEvent {}
    
    class FetchMusicEvent extends MusicEvent {}
    
    // 상태 클래스
    abstract class MusicState {}
    
    class MusicInitialState extends MusicState {}
    
    class MusicLoadedState extends MusicState {
      final List<String> musicList;
    
      MusicLoadedState(this.musicList);
    }
    
    class MusicErrorState extends MusicState {}
    
    // BLoC 클래스
    class MusicBloc extends Bloc<MusicEvent, MusicState> {
      MusicBloc() : super(MusicInitialState());
    
      @override
      Stream<MusicState> mapEventToState(MusicEvent event) async* {
        if (event is FetchMusicEvent) {
          yield* _mapFetchMusicEventToState();
        }
      }
    
      Stream<MusicState> _mapFetchMusicEventToState() async* {
        try {
          final response = await http.get(Uri.parse('YOUR_MUSIC_API_URL'));
          if (response.statusCode == 200) {
            final List<String> musicList = ['Song 1', 'Song 2', 'Song 3']; // 실제 데이터로 대체
    
            yield MusicLoadedState(musicList);
          } else {
            yield MusicErrorState();
          }
        } catch (e) {
          yield MusicErrorState();
        }
      }
    }` 

UI 생성: lib 폴더에 screens 디렉토리를 생성하고 그 안에 music_screen.dart 파일을 생성합니다.

    
    `import 'package:flutter/material.dart';
    import 'package:flutter_bloc/flutter_bloc.dart';
    import 'package:your_app_name/bloc/music_bloc.dart';
    
    class MusicScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Apple Music List'),
          ),
          body: BlocBuilder<MusicBloc, MusicState>(
            builder: (context, state) {
              if (state is MusicInitialState) {
                BlocProvider.of<MusicBloc>(context).add(FetchMusicEvent());
              } else if (state is MusicLoadedState) {
                return ListView.builder(
                  itemCount: state.musicList.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(state.musicList[index]),
                    );
                  },
                );
              } else if (state is MusicErrorState) {
                return Center(
                  child: Text('Error loading music list.'),
                );
              }
    
              return Center(
                child: CircularProgressIndicator(),
              );
            },
          ),
        );
      }
    }` 

메인 앱 파일 수정: lib 폴더에 있는 main.dart 파일을 열고 아래와 같이 수정합니다.

    
    `import 'package:flutter/material.dart';
    import 'package:flutter_bloc/flutter_bloc.dart';
    import 'package:your_app_name/bloc/music_bloc.dart';
    import 'package:your_app_name/screens/music_screen.dart';
    
    void main() {
      runApp(AppleMusicApp());
    }
    
    class AppleMusicApp extends StatelessWidget {
      final MusicBloc _musicBloc = MusicBloc();
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Apple Music App',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: BlocProvider<MusicBloc>(
            create: (context) => _musicBloc,
            child: MusicScreen(),
          ),
        );
      }
    
      @override
      void dispose() {
        _musicBloc.close();
        super.dispose();
      }
    }` 

이제 앱을 실행하면 애플 음악 리스트를 가져와서 표시하는 화면이 나타날 것입니다.

반드시 해당 앱에서 사용할 API를 확인하고 사용 권한 및 인증 방법을 숙지한 후에 실제 데이터를 가져오도록 수정해야 합니다. 이 예제에서는 단순히 가상의 음악 리스트를 사용하였습니다.