Should i put CameraController to getxController? - flutter

Question

I saw in the getx documents that GetxController is business logic class. When i try to seperate business logic in widget, i have an issue about some controllers such as CameraController, QRViewController,MediaPlayer,... Should i put all things in GetxController or keep this in widget?
qr_code.dart
import 'dart:developer';
import 'dart:io';
import 'package:clean_architecture_getx/controller/qr_code/qr_code_controller.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
class QrCodeScreen extends StatefulWidget {
const QrCodeScreen({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _QrCodeScreenState();
}
class _QrCodeScreenState extends State<QrCodeScreen> {
final scanQrController = Get.put(ScanQrController());
QRViewController? qrViewController;
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
// In order to get hot reload to work we need to pause the camera if the platform
// is android, or resume the camera if the platform is iOS.
#override
void reassemble() {
super.reassemble();
if (Platform.isAndroid) {
qrViewController!.pauseCamera();
}
qrViewController!.resumeCamera();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(flex: 4, child: _buildQrView(context)),
Expanded(
flex: 1,
child: FittedBox(
fit: BoxFit.contain,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Obx(() {
if (scanQrController.result.value.code != null) {
return Text(
'Barcode Type: ${describeEnum(scanQrController.result
.value.format)} Data: ${scanQrController.result
.value.code}');
} else {
return const Text('Scan a code');
}
}),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await qrViewController?.toggleFlash();
setState(() {});
},
child: FutureBuilder(
future: qrViewController?.getFlashStatus(),
builder: (context, snapshot) {
return Text('Flash: ${snapshot.data}');
},
)),
),
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await qrViewController?.flipCamera();
setState(() {});
},
child: FutureBuilder(
future: qrViewController?.getCameraInfo(),
builder: (context, snapshot) {
if (snapshot.data != null) {
return Text(
'Camera facing ${describeEnum(
snapshot.data!)}');
} else {
return const Text('loading');
}
},
)),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await qrViewController?.pauseCamera();
},
child: const Text('pause',
style: TextStyle(fontSize: 20)),
),
),
Container(
margin: const EdgeInsets.all(8),
child: ElevatedButton(
onPressed: () async {
await qrViewController?.resumeCamera();
},
child: const Text('resume',
style: TextStyle(fontSize: 20)),
),
)
],
),
],
),
),
)
],
),
);
}
Widget _buildQrView(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)
? 150.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 QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.red,
borderRadius: 10,
borderLength: 30,
borderWidth: 10,
cutOutSize: scanArea),
onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),
);
}
void _onQRViewCreated(QRViewController controller) {
setState(() {
this.qrViewController = controller;
});
controller.scannedDataStream.listen((scanData) {
debugPrint('barcode: ${scanData.code}');
scanQrController.updateBarCode(scanData);
});
}
void _onPermissionSet(BuildContext context, QRViewController ctrl, bool p) {
log('${DateTime.now().toIso8601String()}_onPermissionSet $p');
if (!p) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('no Permission')),
);
}
}
#override
void dispose() {
qrViewController?.dispose();
super.dispose();
}
}
qr_code_controller.dart
import 'package:get/get.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
class ScanQrController extends GetxController {
final result = Barcode(null, BarcodeFormat.unknown, null).obs;
void onQrViewCreated(QRViewController controller) {}
void updateBarCode(Barcode barcode) {
result.value = barcode;
}
}
Should i put QRViewController to ScanQrController (GetxController) or keep it in widget?

Answer 1

Put the UI in a view, and put the business logic inside a controller. Have a GetX Controller per feature. It would be more helpful if you could provide an example of your code.