Flutter Web plugin for scanning QR codes
Firstly you need to add this plugin flutter_web_qrcode_scanner:1.1.1
to your pubspec.yaml file.
dependencies:
flutter_web_qrcode_scanner:1.1.1
Then you need to add <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
to your index.html
file after body tag.
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
Auto play example, The video preview (scanning area) will start automatically
FlutterWebQrcodeScanner(
cameraDirection: CameraDirection.back,
stopOnFirstResult: true, //set false if you don't want to stop video preview on getting first result
onGetResult: (result) {
// _result = jsonDecode(result);
},
//width:200,
//height:200,
)
You are able to choose the scanning camera via the cameraDirection attribute CameraDirection.back
or CameraDirection.front
,
If you want to control the start and stop of camera scanning, you must use the CameraController attribute
CameraController _controller = CameraController(autoPlay: false);
then you can start and stop video preview by calling methods startVideoStream()
and stopVideoStream()
InkWell(
//some code
onTap:(){
_controller.startVideoStream();
},
)
.
.
.
FlutterWebQrcodeScanner(
controller: _controller,
onGetResult: (result) {
// some code
_controller.stopVideoStream();
},
)