This commit is contained in:
Adam Velebil 2023-09-21 15:12:48 +02:00
commit 926b965903
No known key found for this signature in database
GPG Key ID: C9B1E4A3CBBD2E10
5 changed files with 221 additions and 214 deletions

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 Yubico.
* Copyright (C) 2022-2023 Yubico.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -14,77 +14,54 @@
* limitations under the License.
*/
import 'dart:math';
import 'package:flutter/material.dart';
import 'qr_scanner_scan_status.dart';
import 'qr_scanner_util.dart';
/// Return the rounded rect which represents the scanner area for the background
/// overlay and the stroke
RRect _getScannerAreaRRect(Size size) {
double scannerAreaWidth = getScannerAreaWidth(size);
var scannerAreaRect = Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: scannerAreaWidth,
height: scannerAreaWidth);
return RRect.fromRectAndRadius(
scannerAreaRect, const Radius.circular(scannerAreaRadius));
}
// CustomPainter which strokes the scannerArea
class _ScannerAreaStrokePainter extends CustomPainter {
final Color _strokeColor;
_ScannerAreaStrokePainter(this._strokeColor) : super();
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = _strokeColor
..style = PaintingStyle.stroke
..strokeWidth = 3.0;
Path path = Path()..addRRect(_getScannerAreaRRect(size));
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
/// clips the scanner area rounded rect of specific Size
class _ScannerAreaClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
return Path()
..addRect(Rect.fromLTWH(0, 0, size.width, size.height))
..addRRect(_getScannerAreaRRect(size))
..fillType = PathFillType.evenOdd;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}
class QRScannerOverlay extends StatelessWidget {
final ScanStatus status;
final Size screenSize;
final GlobalKey overlayWidgetKey;
const QRScannerOverlay({
super.key,
const QRScannerOverlay(
{super.key,
required this.status,
required this.screenSize,
});
required this.overlayWidgetKey});
RRect getOverlayRRect(Size size) {
final renderBox =
overlayWidgetKey.currentContext?.findRenderObject() as RenderBox;
final renderObjectSize = renderBox.size;
final renderObjectOffset = renderBox.globalToLocal(Offset.zero);
final double shorterEdge =
min(renderObjectSize.width, renderObjectSize.height);
var top = (size.height - shorterEdge) / 2 - 32;
if (top + renderObjectOffset.dy < 0) {
top = -renderObjectOffset.dy;
}
return RRect.fromRectAndRadius(
Rect.fromLTWH(
(size.width - shorterEdge) / 2, top, shorterEdge, shorterEdge),
const Radius.circular(10));
}
@override
Widget build(BuildContext context) {
var size = screenSize;
overlayRectProvider(Size size) {
return getOverlayRRect(size);
}
return Stack(children: [
return Stack(fit: StackFit.expand, children: [
/// clip scanner area "hole" into a darkened background
ClipPath(
clipper: _ScannerAreaClipper(),
clipper: _OverlayClipper(overlayRectProvider),
child: const Opacity(
opacity: 0.6,
child: ColoredBox(
@ -94,34 +71,85 @@ class QRScannerOverlay extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [Spacer()],
)))),
),
),
),
),
/// draw a stroke around the scanner area
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CustomPaint(
painter: _ScannerAreaStrokePainter(status == ScanStatus.error
? Colors.red.shade400
: Colors.green.shade400),
painter: _OverlayPainter(status, overlayRectProvider),
),
],
),
/// extra icon when successful scan occurred
if (status == ScanStatus.success)
Positioned.fromRect(
rect: Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: size.width,
height: size.height),
child: Icon(
Icons.check_circle,
size: 200,
color: Colors.green.shade400,
)),
]);
}
}
/// Paints a colored stroke and status icon.
/// The stroke area is acquired through passed in rectangle provider.
/// The color is computed from the scan status.
class _OverlayPainter extends CustomPainter {
final ScanStatus _status;
final Function(Size) _rectProvider;
_OverlayPainter(this._status, this._rectProvider) : super();
@override
void paint(Canvas canvas, Size size) {
final color = _status == ScanStatus.error
? Colors.red.shade400
: Colors.green.shade400;
Paint paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 3.0;
final RRect overlayRRect = _rectProvider(size);
Path path = Path()..addRRect(overlayRRect);
canvas.drawPath(path, paint);
if (_status == ScanStatus.success) {
const icon = Icons.check_circle;
final iconSize =
overlayRRect.width < 150 ? overlayRRect.width - 5.0 : 150.0;
TextPainter iconPainter = TextPainter(
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
);
iconPainter.text = TextSpan(
text: String.fromCharCode(icon.codePoint),
style: TextStyle(
fontSize: iconSize,
fontFamily: icon.fontFamily,
color: color.withAlpha(240),
));
iconPainter.layout();
iconPainter.paint(
canvas,
overlayRRect.center.translate(-iconSize / 2, -iconSize / 2),
);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
/// Clips a hole into the background.
/// The clipped area is acquired through passed in rectangle provider.
class _OverlayClipper extends CustomClipper<Path> {
final Function(Size) _rectProvider;
_OverlayClipper(this._rectProvider);
@override
Path getClip(Size size) {
return Path()
..addRect(Rect.fromLTWH(0, 0, size.width, size.height))
..addRRect(_rectProvider(size))
..fillType = PathFillType.evenOdd;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 Yubico.
* Copyright (C) 2022-2023 Yubico.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -18,7 +18,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'qr_scanner_scan_status.dart';
import 'qr_scanner_util.dart';
class QRScannerPermissionsUI extends StatelessWidget {
final ScanStatus status;
@ -34,32 +33,21 @@ class QRScannerPermissionsUI extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final scannerAreaWidth = getScannerAreaWidth(screenSize);
return Stack(children: [
/// instruction text under the scanner area
Positioned.fromRect(
rect: Rect.fromCenter(
center: Offset(screenSize.width / 2,
screenSize.height - scannerAreaWidth / 2.0 + 8.0),
width: screenSize.width,
height: screenSize.height),
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 36),
child: Text(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
l10n.p_need_camera_permission,
style: const TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
)),
/// button for manual entry
Positioned.fromRect(
rect: Rect.fromCenter(
center: Offset(screenSize.width / 2, screenSize.height),
width: screenSize.width,
height: screenSize.height),
child: Row(
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
@ -97,8 +85,10 @@ class QRScannerPermissionsUI extends StatelessWidget {
)),
],
)
]),
])
],
),
]);
),
);
}
}

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 Yubico.
* Copyright (C) 2022-2023 Yubico.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -19,33 +19,44 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import '../keys.dart' as keys;
import 'qr_scanner_scan_status.dart';
import 'qr_scanner_util.dart';
class QRScannerUI extends StatelessWidget {
final ScanStatus status;
final Size screenSize;
final GlobalKey overlayWidgetKey;
const QRScannerUI({
super.key,
const QRScannerUI(
{super.key,
required this.status,
required this.screenSize,
});
required this.overlayWidgetKey});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final scannerAreaWidth = getScannerAreaWidth(screenSize);
return Stack(children: [
/// instruction text under the scanner area
Positioned.fromRect(
rect: Rect.fromCenter(
center: Offset(screenSize.width / 2,
screenSize.height + scannerAreaWidth / 2.0 + 8.0),
width: screenSize.width,
height: screenSize.height),
return Stack(
fit: StackFit.expand,
children: [
SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(4.0),
padding: const EdgeInsets.only(
left: 16, right: 16, top: 0, bottom: 0),
child: SizedBox(
// other widgets can find the RenderObject of this
// widget by its key value and query its size and offset.
key: overlayWidgetKey,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Text(
status != ScanStatus.error
? l10n.l_point_camera_scan
@ -54,16 +65,8 @@ class QRScannerUI extends StatelessWidget {
textAlign: TextAlign.center,
),
),
),
/// button for manual entry
Positioned.fromRect(
rect: Rect.fromCenter(
center: Offset(screenSize.width / 2,
screenSize.height + scannerAreaWidth / 2.0 + 80.0),
width: screenSize.width,
height: screenSize.height),
child: Column(
const SizedBox(height: 16),
Column(
children: [
Text(
l10n.q_no_qr,
@ -81,7 +84,11 @@ class QRScannerUI extends StatelessWidget {
)),
],
),
const SizedBox(height: 8)
],
),
]);
)
],
);
}
}

View File

@ -1,21 +0,0 @@
/*
* Copyright (C) 2022 Yubico.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import 'dart:ui';
const double scannerAreaRadius = 40.0;
double getScannerAreaWidth(Size size) => size.width - scannerAreaRadius;

View File

@ -1,5 +1,5 @@
/*
* Copyright (C) 2022 Yubico.
* Copyright (C) 2022-2023 Yubico.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -103,6 +103,7 @@ class _QrScannerViewState extends State<QrScannerView> {
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final screenSize = MediaQuery.of(context).size;
final overlayWidgetKey = GlobalKey();
return Scaffold(
resizeToAvoidBottomInset: false,
extendBodyBehindAppBar: true,
@ -153,12 +154,14 @@ class _QrScannerViewState extends State<QrScannerView> {
child: QRScannerOverlay(
status: _status,
screenSize: screenSize,
overlayWidgetKey: overlayWidgetKey,
)),
Visibility(
visible: _permissionsGranted,
child: QRScannerUI(
status: _status,
screenSize: screenSize,
overlayWidgetKey: overlayWidgetKey,
)),
Visibility(
visible: _previewInitialized && !_permissionsGranted,