[flutter] 플러터 Radio와 실시간 랭킹 기능 구현하기

14 Dec 2023

flutter

이번에는 플러터를 사용하여 라디오 앱을 개발하고, 실시간으로 노래 랭킹을 보여주는 기능을 구현해보겠습니다.

라디오 앱 UI 디자인

먼저, 라디오 앱의 UI를 디자인해야 합니다. 홈 화면에는 현재 재생 중인 노래의 정보와 랭킹 목록이 표시될 예정입니다. 앱 바텀 내비게이션을 사용하여 홈, 랭킹, 설정 등의 메뉴를 추가할 수 있습니다.

// 예시 코드
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('라디오 앱'),
        ),
        body: Center(
          child: Text('현재 재생 중인 노래 정보 표시'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '홈',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.star),
              label: '랭킹',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: '설정',
            ),
          ],
        ),
      ),
    );
  }
}

라디오 스트리밍 및 노래 정보 표시

라디오 스트리밍은 다양한 패키지를 통해 구현할 수 있습니다. 예를 들어, audioplayers 패키지를 사용하여 라디오 스트리밍을 구현할 수 있습니다. 재생 중인 노래의 정보는 노래 제목, 아티스트, 앨범 커버 등을 표시해야 합니다.

// 예시 코드
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

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

class MyApp extends StatelessWidget {
  final audioPlayer = AudioPlayer();

  playRadio() {
    audioPlayer.play(radioStreamUrl);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('라디오 앱'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('현재 재생 중인 노래 정보 표시'),
              RaisedButton(
                onPressed: playRadio,
                child: Text('라디오 재생'),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          // 하단 네비게이션 메뉴 코드는 생략
        ),
      ),
    );
  }
}

실시간 랭킹 기능 구현

실시간 랭킹 기능은 백엔드 서버에서 실시간으로 랭킹 데이터를 가져와 사용해야 합니다. 이를 위해 RESTful API를 통해 랭킹 데이터를 가져오고, 플러터 앱에서 받아서 화면에 표시해야 합니다. 상태 관리 패키지인 provider를 사용하여 데이터 상태 관리를 쉽게 할 수 있습니다.

// 예시 코드
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class SongRanking {
  final String title;
  final String artist;

  SongRanking(this.title, this.artist);
}

class SongRankingList with ChangeNotifier {
  List<SongRanking> _rankings = [];

  List<SongRanking> get rankings => _rankings;

  void updateRankings(List<SongRanking> newRankings) {
    _rankings = newRankings;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('라디오 앱'),
        ),
        body: Center(
          child: Consumer<SongRankingList>(
            builder: (context, rankingsData, child) => ListView.builder(
              itemCount: rankingsData.rankings.length,
              itemBuilder: (context, index) {
                final ranking = rankingsData.rankings[index];
                return ListTile(
                  title: Text(ranking.title),
                  subtitle: Text(ranking.artist),
                );
              },
            ),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          // 하단 네비게이션 메뉴 코드는 생략
        ),
      ),
    );
  }
}

위와 같이 플러터를 사용하여 라디오 앱과 실시간 랭킹 기능을 구현할 수 있습니다. 이를 활용하여 사용자들이 실시간으로 인기 곡을 확인하고, 라디오를 편리하게 즐길 수 있는 서비스를 제공할 수 있습니다.