[flutter] 플러터 Radio와 주간 인기 아티스트 표시 기능 개발하기

14 Dec 2023

flutter

이번에는 플러터 앱에 Radio 기능을 추가하고, 주간 인기 아티스트를 표시하는 기능을 개발해 보겠습니다.

라디오 기능 추가

먼저, 앱에 라디오 기능을 추가하는 방법은 매우 간단합니다. flutter_radio와 같은 라이브러리를 사용하여 손쉽게 라디오 스트리밍을 구현할 수 있습니다.

아래는 flutter_radio 라이브러리를 사용한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_radio/flutter_radio.dart';

void main() {
  runApp(MyApp());
  initRadioService();
}

void initRadioService() async {
  await FlutterRadio.audioStart();
  print('Radio is playing');
}

위 코드에서는 flutter_radio 라이브러리를 사용하여 앱이 시작될 때 라디오 스트리밍을 초기화하고, 콘솔에 ‘Radio is playing’ 메시지를 출력합니다.

주간 인기 아티스트 표시 기능 개발

주간 인기 아티스트를 표시하는 기능을 구현하기 위해서는 API를 사용하여 해당 정보를 가져와야 합니다. 여기서는 Last.fm API를 사용하는 것으로 가정하고, 해당 API를 통해 주간 인기 아티스트를 가져와서 화면에 표시하는 방법을 알아보겠습니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class WeeklyArtistsScreen extends StatelessWidget {
  Future<List<String>> fetchWeeklyArtists() async {
    final response = await http.get(Uri.parse('https://ws.audioscrobbler.com/2.0/?method=chart.gettopartists&api_key=YOUR_API_KEY&format=json'));

    if (response.statusCode == 200) {
      final Map<String, dynamic> data = json.decode(response.body);
      final List<dynamic> artists = data['artists'];
      return List<String>.from(artists.map((artist) => artist['name']));
    } else {
      throw Exception('Failed to load weekly artists');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<String>>(
      future: fetchWeeklyArtists(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Failed to load weekly artists');
        } else {
          final List<String> artists = snapshot.data;
          return ListView.builder(
            itemCount: artists.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(artists[index]),
              );
            },
          );
        }
      },
    );
  }
}

위 코드에서는 http 패키지를 사용하여 Last.fm API에 요청을 보내고, 응답으로 받은 주간 인기 아티스트 목록을 화면에 리스트로 표시하는 예시입니다.

이제 이러한 기능들을 결합하여 플러터 앱에 라디오와 주간 인기 아티스트를 표시하는 기능을 완성할 수 있게 됩니다.

결론

이제 여러분은 flutter_radio를 사용하여 앱에 라디오 스트리밍을 추가하고, API를 통해 주간 인기 아티스트를 가져와서 표시하는 기능을 구현하는 방법을 배웠습니다. 이러한 기능들을 효과적으로 활용하여 사용자들에게 다양한 음악 경험을 제공할 수 있을 것입니다.

목차

라디오 기능 추가

주간 인기 아티스트 표시 기능 개발

결론