[flutter] 플러터 Wrap을 사용하여 오디오 재생 및 녹음 기능을 구현하는 방법

07 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 다양한 기능을 구현할 수 있습니다. 이번에는 Wrap 위젯을 이용하여 오디오 재생 및 녹음 기능을 구현하는 방법에 대해 알아보겠습니다.

1. Wrap 위젯 이해하기

Wrap 위젯은 자식 위젯들을 행과 열로 배치하는 유동적인 레이아웃 위젯입니다. 자식 위젯들이 가로 공간을 넘어갈 경우, 자동으로 줄바꿈을 해줍니다. 이러한 특성을 이용하여 오디오 파일들을 유연하게 나열할 수 있습니다.

2. 오디오 재생 기능 구현하기

2.1. 오디오 파일 재생을 위한 패키지 추가하기

우선, pubspec.yaml 파일에서 audio_player 패키지를 추가해주세요. 이 패키지는 오디오 파일을 재생할 수 있는 기능을 제공합니다.

dependencies:
  flutter:
    sdk: flutter
  audio_player: ^0.17.0

2.2. 오디오 파일 재생 코드 작성하기

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

class AudioPlayerPage extends StatefulWidget {
  @override
  _AudioPlayerPageState createState() => _AudioPlayerPageState();
}

class _AudioPlayerPageState extends State<AudioPlayerPage> {
  AudioPlayer audioPlayer = AudioPlayer();
  List<String> audioFiles = [
    "audio1.mp3",
    "audio2.mp3",
    "audio3.mp3",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Audio Player"),
      ),
      body: Wrap(
        spacing: 10, // 자식 위젯들 사이의 간격 조절
        children: audioFiles.map((audio) {
          return RaisedButton(
            child: Text(audio),
            onPressed: () {
              audioPlayer.play(audio); // 오디오 파일 재생
            },
          );
        }).toList(),
      ),
    );
  }
}

위의 코드에서는 audio_player 패키지를 사용하여 오디오 파일을 재생하는 기능을 구현하였습니다. audioFiles 리스트에는 재생할 오디오 파일들의 이름을 저장하고, Wrap 위젯을 사용하여 버튼 형태로 나열했습니다. 버튼을 누르면 해당 오디오 파일이 재생됩니다.

3. 오디오 녹음 기능 구현하기

3.1. 오디오 녹음을 위한 패키지 추가하기

오디오 녹음 기능을 추가하기 위해 audio_recorder 패키지를 pubspec.yaml 파일에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  audio_player: ^0.17.0
  audio_recorder: ^0.7.0

3.2. 오디오 파일 녹음 코드 작성하기

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

class AudioRecorderPage extends StatefulWidget {
  @override
  _AudioRecorderPageState createState() => _AudioRecorderPageState();
}

class _AudioRecorderPageState extends State<AudioRecorderPage> {
  bool _isRecording = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Audio Recorder"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text(_isRecording ? "Stop Recording" : "Start Recording"),
          onPressed: () {
            _toggleRecording(); // 녹음 시작 및 정지
          },
        ),
      ),
    );
  }

  void _toggleRecording() async {
    if (_isRecording) {
      // 정지
      await AudioRecorder.stop();
      setState(() {
        _isRecording = false;
      });
    } else {
      // 녹음 시작
      await AudioRecorder.start();
      setState(() {
        _isRecording = true;
      });
    }
  }
}

위의 코드에서는 audio_recorder 패키지를 사용하여 오디오를 녹음하는 기능을 구현했습니다. AudioRecorder.start() 메서드로 녹음을 시작하고, AudioRecorder.stop() 메서드로 녹음을 정지합니다. _toggleRecording() 메서드는 녹음 시작 및 정지를 토글하는 기능을 수행합니다.

마무리

위에서는 Wrap 위젯을 사용하여 플러터에서 오디오 재생 및 녹음 기능을 구현하는 방법을 알아보았습니다. Wrap은 유동적인 레이아웃을 제공하여 다양한 오디오 파일을 나열하기에 유용합니다. 이를 활용하여 더욱 다양한 오디오 기능을 구현해보세요!