step 6 : try audio recording and play before send to BE
This commit is contained in:
@@ -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')),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user