[flutter] 플러터 리퀴드 스와이프로 구현된 미디어 플레이어 예시

18 Dec 2023

flutter

이번에는 Flutter를 사용하여 리퀴드 스와이프로 조작 가능한 미디어 플레이어를 구현하는 방법에 대해 알아보겠습니다.

필요한 패키지

우선, 이 예시를 구현하기 위해 liquid_swipe 패키지와 audioplayers 패키지를 사용할 것입니다.

dependencies:
  liquid_swipe: ^1.1.0
  audioplayers: ^0.20.1

위와 같이 pubspec.yaml 파일을 수정하여 필요한 패키지를 추가합니다. 다음으로, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

미디어 플레이어 구현

이제, 리퀴드 스와이프 미디어 플레이어를 구현하기 위해 먼저 liquid_swipe 패키지를 사용하여 화면을 스와이프할 수 있는 원하는 형태로 구성합니다.

이후, audioplayers 패키지를 사용하여 미디어 재생을 구현합니다. 여기에는 음악 파일을 불러오고 제어하기 위한 기능들이 포함됩니다.

아래는 이러한 구현을 보다 간단하게 정리한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
import 'package:audioplayers/audioplayers.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LiquidSwipePlayer(),
    );
  }
}

class LiquidSwipePlayer extends StatefulWidget {
  @override
  _LiquidSwipePlayerState createState() => _LiquidSwipePlayerState();
}

class _LiquidSwipePlayerState extends State<LiquidSwipePlayer> {
  AudioPlayer audioPlayer = AudioPlayer();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LiquidSwipe(
        pages: [
          // Page 1
          Container(
            child: Center(
              child: FlatButton(
                child: Text('Play Music'),
                onPressed: () {
                  audioPlayer.play('music1.mp3', isLocal: true);
                },
              ),
            ),
          ),
          // Page 2
          Container(
            child: Center(
              child: FlatButton(
                child: Text('Stop Music'),
                onPressed: () {
                  audioPlayer.stop();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

이 예시 코드는 liquid_swipe 패키지를 사용하여 두 개의 페이지로 이루어진 슬라이드 화면을 구성하고, audioplayers 패키지를 사용하여 미디어 플레이어를 구현한 것입니다.

위 코드를 통해 리퀴드 스와이프로 구현된 간단한 미디어 플레이어를 만들 수 있습니다. 물론 이 예시를 기반으로 보다 다양한 기능을 추가하거나 완성도 높은 미디어 플레이어를 구현하는 것도 가능합니다.