mirror of
https://github.com/Yubico/yubioath-flutter.git
synced 2024-11-23 00:57:26 +03:00
Merge PR #1200.
This commit is contained in:
commit
926b965903
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
)),
|
||||
],
|
||||
)
|
||||
]),
|
||||
])
|
||||
],
|
||||
),
|
||||
]);
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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)
|
||||
],
|
||||
),
|
||||
]);
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user