Browse Source

created scanner overlays with relative and absolute sizes with respect to the camera size

pull/58/head
Giulia Testa 2 years ago
parent
commit
c959e1f8be
  1. 2
      example/pubspec.lock
  2. 119
      lib/src/ui/dynamic_scanner_overlay.dart
  3. 126
      lib/src/ui/fixed_scanner_overlay.dart
  4. 3
      lib/src/ui/reader_widget.dart
  5. 115
      lib/src/ui/scanner_overlay.dart

2
example/pubspec.lock

@ -148,7 +148,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.8.4"
version: "0.8.5"
font_awesome_flutter:
dependency: "direct main"
description:

119
lib/src/ui/dynamic_scanner_overlay.dart

@ -0,0 +1,119 @@
import 'package:flutter/material.dart';
import '../../flutter_zxing.dart';
class DynamicScannerOverlay extends ScannerOverlay {
const DynamicScannerOverlay({
super.borderColor,
super.borderWidth,
super.overlayColor,
super.borderRadius,
super.borderLength,
this.cutOutSize = 0.5
});
@override
final double cutOutSize;
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
final double width = rect.width;
final double height = rect.height;
final double borderOffset = borderWidth / 2;
final double newBorderLength = borderLength;
final double newCutOutSize = width * cutOutSize;
final Paint backgroundPaint = Paint()
..color = overlayColor
..style = PaintingStyle.fill;
final Paint borderPaint = Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
final Paint boxPaint = Paint()
..color = borderColor
..style = PaintingStyle.fill
..blendMode = BlendMode.dstOut;
final Rect cutOutRect = Rect.fromLTWH(
rect.left + width / 2 - newCutOutSize / 2 + borderOffset,
rect.top + height / 2 - newCutOutSize / 2 + borderOffset,
newCutOutSize - borderOffset * 2,
newCutOutSize - borderOffset * 2,
);
canvas
..saveLayer(
rect,
backgroundPaint,
)
..drawRect(
rect,
backgroundPaint,
)
// Draw top right corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.right - newBorderLength,
cutOutRect.top,
cutOutRect.right,
cutOutRect.top + newBorderLength,
topRight: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw top left corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.left,
cutOutRect.top,
cutOutRect.left + newBorderLength,
cutOutRect.top + newBorderLength,
topLeft: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw bottom right corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.right - newBorderLength,
cutOutRect.bottom - newBorderLength,
cutOutRect.right,
cutOutRect.bottom,
bottomRight: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw bottom left corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.left,
cutOutRect.bottom - newBorderLength,
cutOutRect.left + newBorderLength,
cutOutRect.bottom,
bottomLeft: Radius.circular(borderRadius),
),
borderPaint,
)
..drawRRect(
RRect.fromRectAndRadius(
cutOutRect,
Radius.circular(borderRadius),
),
boxPaint,
)
..restore();
}
@override
DynamicScannerOverlay scale(double t) {
return DynamicScannerOverlay(
borderColor: borderColor,
borderWidth: borderWidth * t,
overlayColor: overlayColor,
);
}
}

126
lib/src/ui/fixed_scanner_overlay.dart

@ -0,0 +1,126 @@
import 'package:flutter/material.dart';
import '../../flutter_zxing.dart';
class FixedScannerOverlay extends ScannerOverlay {
const FixedScannerOverlay({
super.borderColor,
super.borderWidth,
super.overlayColor,
super.borderRadius,
super.borderLength,
this.cutOutSize = 250
}) : assert(borderLength <= cutOutSize / 2 + borderWidth * 2,
"Border can't be larger than ${cutOutSize / 2 + borderWidth * 2}");
@override
final double cutOutSize;
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
final double width = rect.width;
final double borderWidthSize = width / 2;
final double height = rect.height;
final double borderOffset = borderWidth / 2;
final double newBorderLength =
borderLength > cutOutSize / 2 + borderWidth * 2
? borderWidthSize / 2
: borderLength;
final double newCutOutSize =
cutOutSize < width ? cutOutSize : width - borderOffset;
final Paint backgroundPaint = Paint()
..color = overlayColor
..style = PaintingStyle.fill;
final Paint borderPaint = Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
final Paint boxPaint = Paint()
..color = borderColor
..style = PaintingStyle.fill
..blendMode = BlendMode.dstOut;
final Rect cutOutRect = Rect.fromLTWH(
rect.left + width / 2 - newCutOutSize / 2 + borderOffset,
rect.top + height / 2 - newCutOutSize / 2 + borderOffset,
newCutOutSize - borderOffset * 2,
newCutOutSize - borderOffset * 2,
);
canvas
..saveLayer(
rect,
backgroundPaint,
)
..drawRect(
rect,
backgroundPaint,
)
// Draw top right corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.right - newBorderLength,
cutOutRect.top,
cutOutRect.right,
cutOutRect.top + newBorderLength,
topRight: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw top left corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.left,
cutOutRect.top,
cutOutRect.left + newBorderLength,
cutOutRect.top + newBorderLength,
topLeft: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw bottom right corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.right - newBorderLength,
cutOutRect.bottom - newBorderLength,
cutOutRect.right,
cutOutRect.bottom,
bottomRight: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw bottom left corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.left,
cutOutRect.bottom - newBorderLength,
cutOutRect.left + newBorderLength,
cutOutRect.bottom,
bottomLeft: Radius.circular(borderRadius),
),
borderPaint,
)
..drawRRect(
RRect.fromRectAndRadius(
cutOutRect,
Radius.circular(borderRadius),
),
boxPaint,
)
..restore();
}
@override
FixedScannerOverlay scale(double t) {
return FixedScannerOverlay(
borderColor: borderColor,
borderWidth: borderWidth * t,
overlayColor: overlayColor,
);
}
}

3
lib/src/ui/reader_widget.dart

@ -10,6 +10,7 @@ import 'package:flutter/material.dart';
import '../../generated_bindings.dart';
import '../logic/zxing.dart';
import '../utils/extentions.dart';
import 'fixed_scanner_overlay.dart';
import 'scanner_overlay.dart';
class ReaderWidget extends StatefulWidget {
@ -225,7 +226,7 @@ class _ReaderWidgetState extends State<ReaderWidget>
Container(
decoration: ShapeDecoration(
shape: widget.scannerOverlay ??
ScannerOverlay(
FixedScannerOverlay(
borderColor: Theme.of(context).primaryColor,
overlayColor: Colors.black45,
borderRadius: 1,

115
lib/src/ui/scanner_overlay.dart

@ -1,22 +1,22 @@
import 'package:flutter/material.dart';
class ScannerOverlay extends ShapeBorder {
abstract class ScannerOverlay extends ShapeBorder {
const ScannerOverlay ({
this.borderColor = Colors.red,
this.borderWidth = 3.0,
this.overlayColor = const Color.fromRGBO(0, 0, 0, 40),
this.borderRadius = 0,
this.borderLength = 40,
this.cutOutSize = 250,
}) : assert(borderLength <= cutOutSize / 2 + borderWidth * 2,
"Border can't be larger than ${cutOutSize / 2 + borderWidth * 2}");
});
final Color borderColor;
final double borderWidth;
final Color overlayColor;
final double borderRadius;
final double borderLength;
final double cutOutSize;
abstract final double cutOutSize;
@override
EdgeInsetsGeometry get dimensions => const EdgeInsets.all(10);
@ -53,108 +53,9 @@ class ScannerOverlay extends ShapeBorder {
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
final double width = rect.width;
final double borderWidthSize = width / 2;
final double height = rect.height;
final double borderOffset = borderWidth / 2;
final double newBorderLength =
borderLength > cutOutSize / 2 + borderWidth * 2
? borderWidthSize / 2
: borderLength;
final double newCutOutSize =
cutOutSize < width ? cutOutSize : width - borderOffset;
final Paint backgroundPaint = Paint()
..color = overlayColor
..style = PaintingStyle.fill;
final Paint borderPaint = Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
final Paint boxPaint = Paint()
..color = borderColor
..style = PaintingStyle.fill
..blendMode = BlendMode.dstOut;
final Rect cutOutRect = Rect.fromLTWH(
rect.left + width / 2 - newCutOutSize / 2 + borderOffset,
rect.top + height / 2 - newCutOutSize / 2 + borderOffset,
newCutOutSize - borderOffset * 2,
newCutOutSize - borderOffset * 2,
);
canvas
..saveLayer(
rect,
backgroundPaint,
)
..drawRect(
rect,
backgroundPaint,
)
// Draw top right corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.right - newBorderLength,
cutOutRect.top,
cutOutRect.right,
cutOutRect.top + newBorderLength,
topRight: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw top left corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.left,
cutOutRect.top,
cutOutRect.left + newBorderLength,
cutOutRect.top + newBorderLength,
topLeft: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw bottom right corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.right - newBorderLength,
cutOutRect.bottom - newBorderLength,
cutOutRect.right,
cutOutRect.bottom,
bottomRight: Radius.circular(borderRadius),
),
borderPaint,
)
// Draw bottom left corner
..drawRRect(
RRect.fromLTRBAndCorners(
cutOutRect.left,
cutOutRect.bottom - newBorderLength,
cutOutRect.left + newBorderLength,
cutOutRect.bottom,
bottomLeft: Radius.circular(borderRadius),
),
borderPaint,
)
..drawRRect(
RRect.fromRectAndRadius(
cutOutRect,
Radius.circular(borderRadius),
),
boxPaint,
)
..restore();
}
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection});
@override
ShapeBorder scale(double t) {
return ScannerOverlay(
borderColor: borderColor,
borderWidth: borderWidth,
overlayColor: overlayColor,
);
}
ScannerOverlay scale(double t);
}

Loading…
Cancel
Save