[flutter] 플러터(expandable)과 관련된 음악 스트리밍 서비스 앱 개발 방법

04 Dec 2023

flutter

소개

이번에 개발할 앱은 음악 스트리밍 서비스 앱입니다. 사용자들은 앱을 통해 다양한 음악을 스트리밍하고, 재생목록을 생성하거나 공유할 수 있습니다. 이 앱에는 플러터의 expandable 위젯을 사용하여 UI를 개발할 것입니다. expandable 위젯은 사용자가 필요한 정보를 표시하거나 숨기는데 유용한 기능을 제공합니다.

프로젝트 설정

플러터 개발을 위해 Flutter SDK를 설치하고, 개발 환경을 설정합니다. Flutter SDK 설치 가이드는 공식 문서에서 확인할 수 있습니다.

프로젝트를 생성한 후, 필요한 라이브러리를 추가해주세요.

의존성 추가

이 프로젝트에서는 expandable 패키지를 사용할 것입니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가해주세요.

dependencies:
  expandable: ^4.1.4

의존성 추가 후, flutter packages get 명령을 실행하여 패키지를 설치합니다.

UI 디자인

이 앱은 음악 목록과 각 음악에 대한 상세 정보를 표시합니다. 각 음악은 클릭하면 상세 정보가 확장되거나 축소될 수 있도록 개발할 것입니다.

먼저, expandable 위젯을 사용하기 위해 ExpandableController를 생성합니다. 상태 관리를 위한 StatefulWidget에 추가해주세요.

class MusicListPage extends StatefulWidget {
  @override
  _MusicListPageState createState() => _MusicListPageState();
}

class _MusicListPageState extends State<MusicListPage> {
  ExpandableController expandableController;

  @override
  void initState() {
    super.initState();
    expandableController = ExpandableController(initialExpanded: false);
  }

  @override
  void dispose() {
    expandableController.dispose();
    super.dispose();
  }

  // ...
}

음악 목록을 표시하기 위해 ListView.builder를 사용합니다. 각 항목은 ExpandablePanel 위젯으로 래핑되어야 합니다.

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: musicList.length,
    itemBuilder: (context, index) {
      return ExpandablePanel(
        controller: expandableController,
        header: ListTile(
          title: Text(musicList[index].title),
        ),
        collapsed: ListTile(
          title: Text('Tap to expand'),
        ),
        expanded: ListTile(
          title: Text(musicList[index].description),
        ),
      );
    },
  );
}

데이터 로딩

음악 목록을 표시하기 위해 데이터를 로딩해야 합니다. 이 예제에서는 http 패키지를 사용하여 REST API를 호출합니다.

import 'package:http/http.dart' as http;

class MusicListPage extends StatefulWidget {
  @override
  _MusicListPageState createState() => _MusicListPageState();
}

class _MusicListPageState extends State<MusicListPage> {
  List<Music> musicList = [];

  @override
  void initState() {
    super.initState();
    fetchMusicList();
  }

  Future<void> fetchMusicList() async {
    final response = await http.get('https://api.example.com/music');
    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body);
      setState(() {
        musicList = List<Music>.from(jsonData.map((x) => Music.fromJson(x)));
      });
    } else {
      throw Exception('Failed to load music');
    }
  }

  // ...

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

음악 스트리밍 기능 구현

각 음악 항목에서 음악 스트리밍 기능을 구현해야 합니다. 이 예제에서는 audioplayers 패키지를 사용하여 음악을 재생합니다.

import 'package:audioplayers/audioplayers.dart';

class MusicListPage extends StatefulWidget {
  @override
  _MusicListPageState createState() => _MusicListPageState();
}

class _MusicListPageState extends State<MusicListPage> {
  List<Music> musicList = [];
  AudioPlayer audioPlayer = AudioPlayer();

  // ...

  Future<void> playMusic(String url) async {
    await audioPlayer.play(url);
  }

  Future<void> pauseMusic() async {
    await audioPlayer.pause();
  }

  Future<void> stopMusic() async {
    await audioPlayer.stop();
  }

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

결론

이제 음악 스트리밍 서비스 앱을 개발하는 방법에 대해 알아보았습니다. 플러터의 expandable 위젯을 사용하여 UI를 개발하고, 데이터를 로딩하며, 음악 스트리밍 기능을 구현했습니다. 이 예제를 참고하여 원하는 기능을 추가하고, 사용자 경험을 향상시킬 수 있습니다. Happy coding!

목차

소개

프로젝트 설정

의존성 추가

UI 디자인

데이터 로딩

음악 스트리밍 기능 구현

결론