Hi everyone!
I created a widget based on qr_code_scanner from pub.dev, unfortunately I am not a developer and I have a problem with arranging the logic. I would like the page displayed in pageView to change after scanning the QR code. Is there anyone here who could tell me how to achieve this?
The code for the widget looks like this:
class QrResultNav extends StatefulWidget {
const QrResultNav({
Key? key,
this.width,
this.height,
}) : super(key: key);
final double? width;
final double? height;
@override
_CustomQrWidgetState createState() => _CustomQrWidgetState();
}
class _CustomQrWidgetState extends State<QrResultNav> {
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
Barcode? result;
bool isTorchOn = false;
late QRViewController controller;
late PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
// For this example we check how width or tall the device is and change the scanArea and overlay accordingly.
var scanArea = (MediaQuery.of(context).size.width < 400 ||
MediaQuery.of(context).size.height < 400)
? 280.0
: 300.0;
// To ensure the Scanner view is properly sizes after rotation
// we need to listen for Flutter SizeChanged notification and update controller
return Column(
children: <Widget>[
Expanded(
child: QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Color.fromARGB(255, 255, 0, 0),
borderRadius: 8,
borderLength: 16,
borderWidth: 8,
cutOutSize: scanArea),
),
),
],
);
}
void _onQRViewCreated(QRViewController controller) {
this.controller = controller;
bool scanned = false;
controller.scannedDataStream.listen((scanData) {
if (!scanned) {
scanned = true;
_pageController.nextPage(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
);
}
});
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}