step 5 : slicing screen rekam, add scanner package
This commit is contained in:
@@ -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,
|
||||
|
||||
198
lib/screen/home/rekam_screen.dart
Normal file
198
lib/screen/home/rekam_screen.dart
Normal 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)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user