step 5 : slicing screen rekam, add scanner package

This commit is contained in:
sindhu
2025-02-22 01:52:30 +07:00
parent 4db558ab68
commit 61fedad0ca
9 changed files with 234 additions and 3 deletions

View File

@@ -134,7 +134,7 @@ class HomeScreen extends HookConsumerWidget {
),
child: ElevatedButton(
onPressed: () {
// Navigator.of(context).pushNamed(scanRoute);
Navigator.of(context).pushNamed(rekamRoute);
},
style: ElevatedButton.styleFrom(
backgroundColor: Constant.bgButton,

View File

@@ -0,0 +1,198 @@
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:hooks_riverpod/hooks_riverpod.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import '../../app/constant.dart';
class RekamScreen extends HookConsumerWidget {
const RekamScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [SystemUiOverlay.bottom],
);
final isRekam = useState<bool>(false);
final judulTombol = useState<String>("MULAI REKAM");
final qrCodeStr = useState<String>("");
final isSelesaiRekam = useState<bool>(false);
void handleBarcode(BarcodeCapture barcodes) {
if (barcodes.barcodes.isNotEmpty) {
final scannedBarcode =
barcodes.barcodes.firstOrNull?.displayValue ?? "";
if (scannedBarcode.isNotEmpty) {
ref.read(barcodeX.notifier).state = barcodes.barcodes.first;
qrCodeStr.value = scannedBarcode;
}
}
}
Widget buildBarcode(Barcode? value) {
final qrCode = value?.displayValue ?? "";
if (qrCode.isEmpty) {
return const Text(
'Scan untuk mendapatkan QR Code',
overflow: TextOverflow.fade,
style: TextStyle(color: Colors.white),
);
}
return Text(
"Info: $qrCode",
overflow: TextOverflow.fade,
style: const TextStyle(color: Colors.white),
);
}
useEffect(() {
handleBarcode;
return () {};
}, []);
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,
),
),
],
// text
Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 10),
color: Constant.inputanGrey,
child: buildBarcode(ref.watch(barcodeX)),
),
],
),
),
),
);
}
}