flutter_package / mobile_scanner

Go to a project
Toggle navigation Toggle navigation pinning
Navaron Bracke
Committed by GitHub
5c742696 2 parents 4de6f4ab 67e446d6

Merge pull request #798 from Spyy004/master 

feat: Scanner with overlay screen added
Inline Side-by-side
Showing 7 changed files with 243 additions and 232 deletions
... ... @@ -155,7 +155,7 @@
97C146E61CF9000F007C117D /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 1300;
LastUpgradeCheck = 1430;
ORGANIZATIONNAME = "";
TargetAttributes = {
97C146ED1CF9000F007C117D = {
... ...
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "1300"
LastUpgradeVersion = "1430"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
... ...
... ... @@ -51,5 +51,10 @@
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs photos access to get QR code from photo library</string>
</dict>
</plist>
... ...
... ... @@ -6,6 +6,7 @@ import 'package:mobile_scanner_example/barcode_scanner_returning_image.dart';
import 'package:mobile_scanner_example/barcode_scanner_window.dart';
import 'package:mobile_scanner_example/barcode_scanner_without_controller.dart';
import 'package:mobile_scanner_example/barcode_scanner_zoom.dart';
import 'package:mobile_scanner_example/mobile_scanner_overlay.dart';
void main() => runApp(const MaterialApp(home: MyHome()));
... ... @@ -95,6 +96,16 @@ class MyHome extends StatelessWidget {
},
child: const Text('MobileScanner pageView'),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => BarcodeScannerWithOverlay(),
),
);
},
child: const Text('MobileScanner with Overlay'),
),
],
),
),
... ...
//TODO: Create example with scanner overlay
// import 'dart:ui';
//
// import 'package:flutter/material.dart';
// import 'package:mobile_scanner/mobile_scanner.dart';
//
// void main() {
// runApp(const AnalyzeView());
// }
//
// class AnalyzeView extends StatefulWidget {
// const AnalyzeView({Key? key}) : super(key: key);
//
// @override
// _AnalyzeViewState createState() => _AnalyzeViewState();
// }
//
// class _AnalyzeViewState extends State<AnalyzeView>
// with SingleTickerProviderStateMixin {
// List<Offset> points = [];
//
// // CameraController cameraController = CameraController(context, width: 320, height: 150);
//
// String? barcode;
//
// @override
// Widget build(BuildContext context) {
// return MaterialApp(
// home: Scaffold(
// body: Builder(builder: (context) {
// return Stack(
// children: [
// MobileScanner(
// // fitScreen: false,
// // controller: cameraController,
// onDetect: (barcode, args) {
// if (this.barcode != barcode.rawValue) {
// this.barcode = barcode.rawValue;
// if (barcode.corners != null) {
// ScaffoldMessenger.of(context).showSnackBar(SnackBar(
// content: Text(barcode.rawValue),
// duration: const Duration(milliseconds: 200),
// animation: null,
// ));
// setState(() {
// final List<Offset> points = [];
// // double factorWidth = args.size.width / 520;
// // double factorHeight = wanted / args.size.height;
// final size = MediaQuery.of(context).devicePixelRatio;
// debugPrint('Size: ${barcode.corners}');
// for (var point in barcode.corners!) {
// final adjustedWith = point.dx;
// final adjustedHeight = point.dy;
// points.add(
// Offset(adjustedWith / size, adjustedHeight / size));
// // points.add(Offset((point.dx ) / size,
// // (point.dy) / size));
// // final differenceWidth = (args.wantedSize!.width - args.size.width) / 2;
// // final differenceHeight = (args.wantedSize!.height - args.size.height) / 2;
// // points.add(Offset((point.dx + differenceWidth) / size,
// // (point.dy + differenceHeight) / size));
// }
// this.points = points;
// });
// }
// }
// // Default 640 x480
// }),
// CustomPaint(
// painter: OpenPainter(points),
// ),
// // Container(
// // alignment: Alignment.bottomCenter,
// // margin: EdgeInsets.only(bottom: 80.0),
// // child: IconButton(
// // icon: ValueListenableBuilder(
// // valueListenable: cameraController.torchState,
// // builder: (context, state, child) {
// // final color =
// // state == TorchState.off ? Colors.grey : Colors.white;
// // return Icon(Icons.bolt, color: color);
// // },
// // ),
// // iconSize: 32.0,
// // onPressed: () => cameraController.torch(),
// // ),
// // ),
// ],
// );
// }),
// ),
// );
// }
//
// @override
// void dispose() {
// // cameraController.dispose();
// super.dispose();
// }
//
// void display(Barcode barcode) {
// Navigator.of(context).popAndPushNamed('display', arguments: barcode);
// }
// }
//
// class OpenPainter extends CustomPainter {
// final List<Offset> points;
//
// OpenPainter(this.points);
// @override
// void paint(Canvas canvas, Size size) {
// var paint1 = Paint()
// ..color = const Color(0xff63aa65)
// ..strokeWidth = 10;
// //draw points on canvas
// canvas.drawPoints(PointMode.points, points, paint1);
// }
//
// @override
// bool shouldRepaint(CustomPainter oldDelegate) => true;
// }
//
// class OpacityCurve extends Curve {
// @override
// double transform(double t) {
// if (t < 0.1) {
// return t * 10;
// } else if (t <= 0.9) {
// return 1.0;
// } else {
// return (1.0 - t) * 10;
// }
// }
// }
//
// // import 'package:flutter/material.dart';
// // import 'package:flutter/rendering.dart';
// // import 'package:mobile_scanner/mobile_scanner.dart';
// //
// // void main() {
// // debugPaintSizeEnabled = false;
// // runApp(HomePage());
// // }
// //
// // class HomePage extends StatefulWidget {
// // @override
// // HomeState createState() => HomeState();
// // }
// //
// // class HomeState extends State<HomePage> {
// // @override
// // Widget build(BuildContext context) {
// // return MaterialApp(home: MyApp());
// // }
// // }
// //
// // class MyApp extends StatefulWidget {
// // @override
// // _MyAppState createState() => _MyAppState();
// // }
// //
// // class _MyAppState extends State<MyApp> {
// // String? qr;
// // bool camState = false;
// //
// // @override
// // initState() {
// // super.initState();
// // }
// //
// // @override
// // Widget build(BuildContext context) {
// // return Scaffold(
// // appBar: AppBar(
// // title: Text('Plugin example app'),
// // ),
// // body: Center(
// // child: Column(
// // crossAxisAlignment: CrossAxisAlignment.center,
// // mainAxisAlignment: MainAxisAlignment.center,
// // children: <Widget>[
// // Expanded(
// // child: camState
// // ? Center(
// // child: SizedBox(
// // width: 300.0,
// // height: 600.0,
// // child: MobileScanner(
// // onError: (context, error) => Text(
// // error.toString(),
// // style: TextStyle(color: Colors.red),
// // ),
// // qrCodeCallback: (code) {
// // setState(() {
// // qr = code;
// // });
// // },
// // child: Container(
// // decoration: BoxDecoration(
// // color: Colors.transparent,
// // border: Border.all(
// // color: Colors.orange,
// // width: 10.0,
// // style: BorderStyle.solid),
// // ),
// // ),
// // ),
// // ),
// // )
// // : Center(child: Text("Camera inactive"))),
// // Text("QRCODE: $qr"),
// // ],
// // ),
// // ),
// // floatingActionButton: FloatingActionButton(
// // child: Text(
// // "press me",
// // textAlign: TextAlign.center,
// // ),
// // onPressed: () {
// // setState(() {
// // camState = !camState;
// // });
// // }),
// // );
// // }
// // }
import 'package:flutter/material.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'package:mobile_scanner_example/scanner_error_widget.dart';
class BarcodeScannerWithOverlay extends StatefulWidget {
@override
_BarcodeScannerWithOverlayState createState() =>
_BarcodeScannerWithOverlayState();
}
class _BarcodeScannerWithOverlayState extends State<BarcodeScannerWithOverlay> {
String overlayText = "Please scan QR Code";
bool camStarted = false;
final ValueNotifier<bool> torchStateNotifier = ValueNotifier<bool>(false);
final MobileScannerController controller = MobileScannerController(
formats: const [BarcodeFormat.qrCode],
autoStart: false,
);
@override
void dispose() {
controller.dispose();
super.dispose();
}
void startCamera() {
try {
setState(() {
camStarted = !camStarted;
controller.start();
});
} on Exception catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Something went wrong! $e'),
backgroundColor: Colors.red,
),
);
}
}
void onBarcodeDetect(BarcodeCapture barcodeCapture) {
final barcode = barcodeCapture.barcodes.last;
setState(() {
overlayText = barcodeCapture.barcodes.last.displayValue ??
barcode.rawValue ??
'Barcode has no displayable value';
});
}
@override
Widget build(BuildContext context) {
final scanWindow = Rect.fromCenter(
center: MediaQuery.of(context).size.center(Offset.zero),
width: 200,
height: 200,
);
return Scaffold(
appBar: AppBar(
title: const Text('Scanner with Overlay Example app'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: camStarted
? Stack(
fit: StackFit.expand,
children: [
Center(
child: MobileScanner(
fit: BoxFit.contain,
onDetect: onBarcodeDetect,
overlay: Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.bottomCenter,
child: Opacity(
opacity: 0.7,
child: Text(
overlayText,
style: const TextStyle(
backgroundColor: Colors.black26,
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24,
overflow: TextOverflow.ellipsis,
),
maxLines: 1,
),
),
),
),
controller: controller,
scanWindow: scanWindow,
errorBuilder: (context, error, child) {
return ScannerErrorWidget(error: error);
},
),
),
CustomPaint(
painter: ScannerOverlay(scanWindow),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ValueListenableBuilder<bool>(
valueListenable: torchStateNotifier,
builder: (context, isTorchOn, child) {
return IconButton(
onPressed: () {
controller.toggleTorch();
torchStateNotifier.value =
!torchStateNotifier.value;
},
icon: Icon(
Icons.flashlight_on,
color: isTorchOn
? Colors.yellow
: Colors.black,
),
);
},
),
IconButton(
onPressed: () => controller.switchCamera(),
icon: const Icon(
Icons.cameraswitch_rounded,
color: Colors.white,
),
),
],
),
),
),
],
)
: const Center(
child: Text("Tap on Camera to activate QR Scanner"),
),
),
],
),
),
floatingActionButton: camStarted
? null
: FloatingActionButton(
child: const Icon(
Icons.camera_alt,
),
onPressed: () {
startCamera();
},
),
);
}
}
class ScannerOverlay extends CustomPainter {
ScannerOverlay(this.scanWindow);
final Rect scanWindow;
final double borderRadius = 12.0;
@override
void paint(Canvas canvas, Size size) {
final backgroundPath = Path()..addRect(Rect.largest);
final cutoutPath = Path()
..addRRect(
RRect.fromRectAndCorners(
scanWindow,
topLeft: Radius.circular(borderRadius),
topRight: Radius.circular(borderRadius),
bottomLeft: Radius.circular(borderRadius),
bottomRight: Radius.circular(borderRadius),
),
);
final backgroundPaint = Paint()
..color = Colors.black.withOpacity(0.5)
..style = PaintingStyle.fill
..blendMode = BlendMode.dstOut;
final backgroundWithCutout = Path.combine(
PathOperation.difference,
backgroundPath,
cutoutPath,
);
// Create a Paint object for the white border
final borderPaint = Paint()
..color = Colors.white
..style = PaintingStyle.stroke
..strokeWidth = 4.0; // Adjust the border width as needed
// Calculate the border rectangle with rounded corners
// Adjust the radius as needed
final borderRect = RRect.fromRectAndCorners(
scanWindow,
topLeft: Radius.circular(borderRadius),
topRight: Radius.circular(borderRadius),
bottomLeft: Radius.circular(borderRadius),
bottomRight: Radius.circular(borderRadius),
);
// Draw the white border
canvas.drawPath(backgroundWithCutout, backgroundPaint);
canvas.drawRRect(borderRect, borderPaint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
... ...
... ... @@ -202,7 +202,7 @@
isa = PBXProject;
attributes = {
LastSwiftUpdateCheck = 0920;
LastUpgradeCheck = 1300;
LastUpgradeCheck = 1430;
ORGANIZATIONNAME = "";
TargetAttributes = {
33CC10EC2044A3C60003C045 = {
... ...
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "1300"
LastUpgradeVersion = "1430"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
... ...