🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / QR CODE ve BARCODE SCANNER qr kare kod okuma kullanımı

1-) FLUTTER - QR CODE ve BARCODE SCANNER qr kare kod okuma kullanımı

 

kaynak : https://pub.dev/packages/qr_code_scanner/example

 

flutter pub add qr_code_scanner

 

EKRAN GÖRÜNTÜSÜ

 

ANDROİD

 

 

İOS

 

 

 

1-) Kullanımı

 

 

Navigator.of(context).push(MaterialPageRoute(
  builder: (context) =>  
QRViewExample(onClick: (String qrTip,String? data) {

    
EasyLoading.showToast(qrTip+" "+data!);

  },),
));

 

 

2-) qrviewexample.dart

 

 

import 'dart:developer';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';

class QRViewExample extends StatefulWidget {

   
Function onClick;

  
QRViewExample({required  this.onClick});

  
@override
  
State<StatefulWidget> createState() => _QRViewExampleState();
}

class _QRViewExampleState extends State<QRViewExample> {
  
Barcode? result;
  
QRViewController? controller;
  
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  
// In order to get hot reload to work we need to pause the camera if the platform
  // is android, or resume the camera if the platform is iOS.
  
@override
  
void reassemble() {
    
super.reassemble();

    
if (Platform.isAndroid) {
      
controller!.pauseCamera();
    }
    
controller!.resumeCamera();
  }

  
@override
 
void initState()  {
    
// TODO: implement initState
    
super.initState();


    
Future.delayed(Duration(seconds: 1)).then((value) {
      
controller!.resumeCamera();
    });


  }

  
@override
  
Widget build(BuildContext context) {
    
return Scaffold(
      body:
Column(
        children: <
Widget>[
          
Expanded(flex: 10, child: _buildQrView(context)),
          
Expanded(flex: 1,child: Container(
            margin:
const EdgeInsets.all(8),
            child:
ElevatedButton(
                onPressed: ()
async {
                  
await controller?.toggleFlash();
                  setState(() {});
                },
                style:
ElevatedButton.styleFrom(backgroundColor: Colors.white),
                child:
FutureBuilder(
                  future:
controller?.getFlashStatus(),
                  builder: (context, snapshot) {
                    
// return Text('Flash: ${snapshot.data}');
                    
return snapshot.data ==false?Image(image: AssetImage("assets/images/fenerof.png"),color: Colors.black,):Image(image: AssetImage("assets/images/feneron.png"),);
                  },
                )),
          ),),
          
Visibility(
            visible:
false,
            child:
Expanded(
              flex:
1,
              child:
FittedBox(
                fit:
BoxFit.contain,
                child:
Column(
                  mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
                  children: <
Widget>[
                    
if (result != null)
                      dataContent()
                    
else
                      const
Text('Scan a code'),
                    
Row(
                      mainAxisAlignment:
MainAxisAlignment.center,
                      crossAxisAlignment:
CrossAxisAlignment.center,
                      children: <
Widget>[
                        
Container(
                          margin:
const EdgeInsets.all(8),
                          child:
ElevatedButton(
                              onPressed: ()
async {
                                
await controller?.toggleFlash();
                                setState(() {});
                              },
                              child:
FutureBuilder(
                                future:
controller?.getFlashStatus(),
                                builder: (context, snapshot) {
                                  
return Text('Flash: ${snapshot.data}');
                                },
                              )),
                        ),
                        
Container(
                          margin:
const EdgeInsets.all(8),
                          child:
ElevatedButton(
                              onPressed: ()
async {
                                
await controller?.flipCamera();
                                setState(() {});
                              },
                              child:
FutureBuilder(
                                future:
controller?.getCameraInfo(),
                                builder: (context, snapshot) {
                                  
if (snapshot.data != null) {
                                    
return Text(
                                        
'Camera facing ${describeEnum(snapshot.data!)}');
                                  }
else {
                                    
return const Text('loading');
                                  }
                                },
                              )),
                        )
                      ],
                    ),
                    
Row(
                      mainAxisAlignment:
MainAxisAlignment.center,
                      crossAxisAlignment:
CrossAxisAlignment.center,
                      children: <
Widget>[
                        
Container(
                          margin:
const EdgeInsets.all(8),
                          child:
ElevatedButton(
                            onPressed: ()
async {
                              
await controller?.pauseCamera();
                            },
                            child:
const Text('pause',
                                style:
TextStyle(fontSize: 20)),
                          ),
                        ),
                        
Container(
                          margin:
const EdgeInsets.all(8),
                          child:
ElevatedButton(
                            onPressed: ()
async {
                              
await controller?.resumeCamera();
                            },
                            child:
const Text('resume',
                                style:
TextStyle(fontSize: 20)),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  
Widget dataContent() {
    
widget.onClick(describeEnum(result!.format),result!.code);
    
if (Platform.isAndroid) {
      
controller!.pauseCamera();
    }
    
controller!.resumeCamera();

    
Navigator.pop(context);

    
return Text(
                      
'Barcode Type: ${describeEnum(result!.format)}   Data: ${result!.code}');
  }

  
Widget _buildQrView(BuildContext context) {
    
// For this example we check how width or tall the device is and change the scanArea and overlay accordingly.
    
var scanArea = (MediaQuery.of(context).size.width < 400 ||
        
MediaQuery.of(context).size.height < 400)
        ?
150.0
        
: 300.0;
    
// To ensure the Scanner view is properly sizes after rotation
    // we need to listen for Flutter SizeChanged notification and update controller
    
return QRView(
      key:
qrKey,
      onQRViewCreated:
_onQRViewCreated,
      overlay:
QrScannerOverlayShape(
          borderColor:
Colors.red,
          borderRadius:
10,
          borderLength:
30,
          borderWidth:
10,
          cutOutSize:
scanArea),
      onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),
    );
  }

  
void _onQRViewCreated(QRViewController controller) {
    setState(() {
      
this.controller = controller;
    });
    controller.
scannedDataStream.listen((scanData) {
      setState(() {
        
result = scanData;
      });
    });
  }

  
void _onPermissionSet(BuildContext context, QRViewController ctrl, bool p) {
    log(
'${DateTime.now().toIso8601String()}_onPermissionSet $p');
    
if (!p) {
      
ScaffoldMessenger.of(context).showSnackBar(
        
const SnackBar(content: Text('no Permission')),
      );
    }
  }

  
@override
  
void dispose() {
    
controller?.dispose();
    
super.dispose();
  }
}

 

 

 

3-) Info.plist IOS için ayar

 

 

<key>io.flutter.embedded_views_preview</key>

<true/>

<key>NSCameraUsageDescription</key>

<string>This app needs camera access to scan QR codes</string>

 

 

4-) web/index.html WEB için ayar

 

 

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js"></script>

 

 

 

 2022 Kasım 07 Pazartesi
 421