I managed so as to add the impact I needed, but it surely solely works on Android gadgets, on IOS the blur impact is on the complete display screen.
my code and prints:
Web page:
class HomePayQrcodePage extends StatelessWidget {
const HomePayQrcodePage({required this.controller, tremendous.key});
ultimate HomePayQrcodeController controller;
@override
Widget construct(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.transparentWhite,
physique: _body(context),
);
}
Widget _body(BuildContext context) {
const cutOutSize = 260.0;
const borderRadius = 20.0;
return SafeArea(
baby: Stack(
kids: [
QRView(
key: GlobalKey(debugLabel: 'HomePayPage'),
onQRViewCreated: controller.onQRViewCreated,
),
Positioned.fill(
child: ClipPath(
clipper: HoleClipper(
cutOutSize: cutOutSize,
borderRadius: borderRadius,
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0),
child: Container(
color: Colors.black54.withOpacity(0.3),
),
),
),
),
Positioned(
top: 10,
left: 10,
child: AppBackButton(onTap: controller.onClickBack),
),
],
),
);
}
}
class HoleClipper extends CustomClipper<Path> {
ultimate double cutOutSize;
ultimate double borderRadius;
HoleClipper({required this.cutOutSize, required this.borderRadius});
@override
Path getClip(Measurement measurement) {
ultimate cutOutRect = RRect.fromRectAndRadius(
Rect.fromCenter(
heart: Offset(measurement.width / 2, measurement.top / 2),
width: cutOutSize,
top: cutOutSize,
),
Radius.round(borderRadius),
);
ultimate path = Path()
..addRect(Rect.fromLTWH(0, 0, measurement.width, measurement.top))
..addRRect(cutOutRect)
..fillType = PathFillType.evenOdd;
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
controller
class HomePayQrcodeController extends GetxController {
QRViewController? tQrViewController;
RxInt cardsListIndex = (Get.arguments[0] as int).obs;
@override
void dispose() {
tremendous.dispose();
tQrViewController?.dispose();
}
Future<void> onQRViewCreated(QRViewController controller) async {
tQrViewController = controller;
controller.scannedDataStream.hear(
(scanData) async {
if (Platform.isAndroid) {
controller.pauseCamera();
} else if (Platform.isIOS) {
controller.resumeCamera();
}
String scanned = scanData.code as String;
log('QR Code Scanned: $scanned');
Get.again(outcome: scanned);
},
);
}
void onClickBack() {
Get.again(outcome: 'again');
}
Future<void> underConstruction() async {
await Get.toNamed(NamedRoutes.underConstruction);
}
}
Android working appropriately:
enter picture description right here
IOS with drawback:
enter picture description right here
As QRView’s personal QrScannerOverlayShape doesn’t assist the blur impact, I attempted including a stack with the primary digicam being the QRView and the second a ClipPath to make the central cutout on the display screen