step 6 : try audio recording and play before send to BE

This commit is contained in:
sindhu
2025-02-22 06:30:34 +07:00
parent 61fedad0ca
commit 5f1917c667
11 changed files with 238 additions and 288 deletions

View File

@@ -1,11 +1,15 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:fluttervoice2text/provider/voice_to_text_provider.dart';
import 'package:path_provider/path_provider.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'package:flutter_sound/flutter_sound.dart';
import 'package:permission_handler/permission_handler.dart';
import 'dart:io';
import '../../app/constant.dart';
import '../../provider/voice_to_text_provider.dart';
class RekamScreen extends HookConsumerWidget {
const RekamScreen({super.key});
@@ -21,6 +25,29 @@ class RekamScreen extends HookConsumerWidget {
final judulTombol = useState<String>("MULAI REKAM");
final qrCodeStr = useState<String>("");
final isSelesaiRekam = useState<bool>(false);
final audioPath = useState<String>("");
final recorder = useState(FlutterSoundRecorder());
final player = useState(FlutterSoundPlayer());
Future<void> requestPermissions() async {
await Permission.microphone.request();
await Permission.storage.request();
}
useEffect(() {
Future<void> initRecorder() async {
await requestPermissions();
await recorder.value.openRecorder();
await player.value.openPlayer();
}
initRecorder();
return () {
recorder.value.closeRecorder();
player.value.closePlayer();
};
}, []);
void handleBarcode(BarcodeCapture barcodes) {
if (barcodes.barcodes.isNotEmpty) {
@@ -33,164 +60,150 @@ class RekamScreen extends HookConsumerWidget {
}
}
Widget buildBarcode(Barcode? value) {
final qrCode = value?.displayValue ?? "";
Future<void> jalankanRekaman() async {
try {
final dir = await getApplicationDocumentsDirectory();
final filePath = '${dir.path}/myFile.aac';
audioPath.value = filePath;
if (qrCode.isEmpty) {
return const Text(
'Scan untuk mendapatkan QR Code',
overflow: TextOverflow.fade,
style: TextStyle(color: Colors.white),
await recorder.value.startRecorder(
toFile: filePath,
);
}
return Text(
"Info: $qrCode",
overflow: TextOverflow.fade,
style: const TextStyle(color: Colors.white),
);
judulTombol.value = "SELESAI";
isSelesaiRekam.value = true;
} catch (e) {
print("Error start record ${e.toString()}");
}
}
useEffect(() {
handleBarcode;
return () {};
}, []);
Future<void> berhentiRekaman() async {
try {
await recorder.value.stopRecorder();
isSelesaiRekam.value = false;
isRekam.value = false;
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus!.unfocus();
},
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Constant.bgGrey,
bottomNavigationBar: BottomAppBar(
color: Colors.blueGrey.shade100,
height: Constant.getActualYPhone(
context: context,
y: 100,
),
shape: const CircularNotchedRectangle(),
child: Row(
children: [
ElevatedButton.icon(
onPressed: () {
ref.read(barcodeX.notifier).state = Barcode();
isRekam.value = false;
judulTombol.value = "MULAI REKAM";
qrCodeStr.value = "";
isSelesaiRekam.value = false;
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back,
size: 17,
color: Constant.textWhite,
),
label: Text(
'Kembali',
style: Constant.cardText(context: context).copyWith(
color: Constant.textWhite,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade400,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 8,
shadowColor: Constant.bgButton.withOpacity(0.24),
),
),
const Spacer(),
// button
ElevatedButton(
onPressed: (qrCodeStr.value.isEmpty || isSelesaiRekam.value)
? null
: () {
judulTombol.value = "SELESAI";
isSelesaiRekam.value = true;
},
style: ElevatedButton.styleFrom(
backgroundColor: (qrCodeStr.value.isEmpty || isSelesaiRekam.value)
? Constant.bgGrey
: Constant.bgButton,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 8,
shadowColor: Constant.bgButton.withOpacity(0.24),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.mic,
size: Constant.getActualXPhone(
context: context,
x: 20,
),
color: Constant.textWhite,
),
SizedBox(
width: Constant.getActualXPhone(
context: context,
x: 10,
),
),
Text(
judulTombol.value,
style: Constant.titleButton500(context: context).copyWith(
color: Constant.textWhite,
),
),
],
),
),
],
),
),
appBar: AppBar(
title: Text(
'Rekam Audio',
style: Constant.titlePosisiHP(context: context),
),
automaticallyImplyLeading: false,
),
body: Padding(
padding: EdgeInsets.symmetric(
horizontal: Constant.getActualXPhone(context: context, x: 20),
),
child: Column(
children: [
// scanner
if (isRekam.value == false) ...[
SizedBox(
width: double.infinity,
height: Constant.getActualYPhone(
context: context,
y: 450,
),
child: MobileScanner(
onDetect: handleBarcode,
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 15,
),
),
],
// panggil fungsi untuk kirim ke BE
} catch (e) {
print("Error stop record ${e.toString()}");
}
}
// text
Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 10),
color: Constant.inputanGrey,
child: buildBarcode(ref.watch(barcodeX)),
Future<void> playRecording() async {
try {
if (audioPath.value.isNotEmpty && File(audioPath.value).existsSync()) {
await player.value.startPlayer(fromURI: audioPath.value);
} else {
print("Error: Path rekaman kosong atau tidak ditemukan.");
}
} catch (e) {
print("Error saat memutar rekaman: ${e.toString()}");
}
}
return Scaffold(
backgroundColor: Constant.bgGrey,
bottomNavigationBar: BottomAppBar(
color: Colors.blueGrey.shade100,
height: Constant.getActualYPhone(context: context, y: 100),
shape: const CircularNotchedRectangle(),
child: Row(
children: [
ElevatedButton.icon(
onPressed: () {
ref.read(barcodeX.notifier).state = Barcode();
isRekam.value = false;
judulTombol.value = "MULAI REKAM";
qrCodeStr.value = "";
isSelesaiRekam.value = false;
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back, size: 17, color: Constant.textWhite),
label: Text(
'Kembali',
style: Constant.cardText(context: context)
.copyWith(color: Constant.textWhite),
),
],
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade400,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 8,
),
),
const Spacer(),
ElevatedButton(
onPressed: qrCodeStr.value.isEmpty
? null
: () async {
if (!isSelesaiRekam.value) {
await jalankanRekaman();
} else {
await berhentiRekaman();
}
},
style: ElevatedButton.styleFrom(
backgroundColor: qrCodeStr.value.isNotEmpty
? Constant.bgButton
: Constant.bgGrey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 8,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.mic, size: 20, color: Constant.textWhite),
SizedBox(width: 10),
Text(
judulTombol.value,
style: Constant.titleButton500(context: context)
.copyWith(color: Constant.textWhite),
),
],
),
),
],
),
),
appBar: AppBar(
title: Text(
'Rekam Audio',
style: Constant.titlePosisiHP(context: context),
),
automaticallyImplyLeading: false,
),
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
if (!isRekam.value)
SizedBox(
width: double.infinity,
height: Constant.getActualYPhone(
context: context,
y: 450,
),
child: MobileScanner(onDetect: handleBarcode),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 20,
),
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(vertical: 10),
color: Constant.inputanGrey,
child: Text("Info: ${qrCodeStr.value}",
style: TextStyle(color: Colors.white)),
),
SizedBox(height: 40),
ElevatedButton(onPressed: playRecording, child: Text('Play')),
],
),
),
);