FlutterFlow에서 사용자 정의 오디오 편집 경험을 어떻게 만들 수 있나요?

시작하기 전에

이 튜토리얼을 시작하기 전에 FlutterFlow가 시스템에 설치되어 있는지 확인하세요. FlutterFlow의 공식 웹사이트를 방문하여 화면에 나타나는 지시사항을 따르면 됩니다.

기본 오디오 재생 및 녹음 기능을 제공하는 flutter_sound Flutter 플러그인을 사용하게 됩니다.

1단계: flutter_sound 플러그인 다운로드

해야 할 첫 번째 일은 flutter_sound를 FlutterFlow 프로젝트에 추가하는 것입니다.

• 프로젝트에서 모든 종속성이 저장된 Lib 폴더로 이동하세요.
• pubspec.yaml 파일을 찾습니다.
• 이 파일을 열고 dependencies: 섹션으로 스크롤 다운합니다.
• 다음 코드 flutter_sound: ^8.1.4를 추가합니다. 8.1.4 버전이 구식이라면, 플러그인의 최신 버전을 확인하기 위해 pub.dev를 방문하세요.

당신의 코드는 대략 이렇게 보일 것입니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_sound: ^8.1.4

2단계: Dart 파일에 flutter_sound를 Import 하기

• 오디오 편집 경험을 추가하려는 Dart 파일을 엽니다.
• Dart 파일 맨 위에 다음을 입력합니다 :

import 'package:flutter_sound/flutter_sound.dart';

이 코드 줄은 프로젝트가 플러그인을 인식하고 기능을 사용하는 데 필요합니다.

3단계: FlutterSound 초기화

다음으로, FlutterSound 객체를 초기화해야 합니다 - 이렇게 하면 플러그인 기능을 사용할 수 있습니다.

• Dart 파일 상단에서 FlutterSound 변수를 선언합니다 :

FlutterSound flutterSound = new FlutterSound();

• 또한 FlutterSound 객체를 initState에서 초기화하는 함수를 추가해야 합니다 :

@override
void initState() {
  super.initState();
  flutterSound = new FlutterSound();
}

4단계: 오디오 녹음 기능 구현

FlutterSound 객체가 준비되었으므로, 먼저 오디오 녹음 기능을 구현해 봅시다.

• 녹음을 시작하는 _startRecording이라는 메서드를 만듭니다 :

void _startRecording() async {
  await flutterSound.startRecorder();
}

• 녹음 과정을 중지하는 _stopRecording이라는 메서드를 만듭니다 :

void _stopRecording() async {
  await flutterSound.stopRecorder();
}

• 이제 이 함수를 트리거하는 버튼이나 이벤트를 추가합니다.

5단계: 오디오 재생 기능 구현

녹음 기능을 추가했으니, 녹음한 오디오를 재생하는 기능을 추가합시다.

• 오디오 재생을 시작하는 _startPlaying이라는 메서드를 만듭니다 :

void _startPlaying() async {
  await flutterSound.startPlayer();
}

• 오디오 재생을 중지하는 _stopPlaying이라는 메서드를 만듭니다 :

void _stopPlaying() async {
  await flutterSound.stopPlayer();
}

• 녹음과 마찬가지로, 이 기능을 트리거하는 버튼 또는 이벤트를 추가합니다.

축하합니다! flutter_sound를 FlutterFlow 프로젝트에 성공적으로 통합하고 사용자 정의 오디오 편집 경험을 만들었습니다. 앱을 실행하고 오디오 녹음 및 재생을 시작해 보세요.

마치며

flutter_sound는 특정 장치에서 마이크를 사용하는 데 권한이 필요할 수 있으므로, 앱의 매니페스트 파일에 필요한 권한을 추가해야 할 수 있음을 유의해 주세요.