شرح كيفية التعامل مع QR توليد وقراءة الباركود في فلاتر بكل سهوله

شرح كيفية التعامل مع QR توليد وقراءة الباركود في فلاتر بكل سهوله

من اكثر الدروس التي يتم طلبها من قبل المبتدئين في تطوير التطبيقات وهيا اضافة Qr في تطبيقك للتعرف على العناصر من خلال الqr code الخاص بالعنصر وهذا الامر بسيط جدا في flutter حيث سوف نشرح لكم في هذه المقالة كيف نقوم بتنفيذ هذه العمليه بكل سهوله من خلال احد المكتبات الموجوده في flutter والتي تسهل علينا القيام بهذه العمليه كما هو موضح بالصورة الخاصه بالمقال 

qr_flutter 

dependencies:

  qr_flutter: ^4.0.0

qr_code_scanner 

dependencies:

  qr_code_scanner: ^1.0.0

كيفية توليد QR خاص بك بإستخدام Flutter بسهوله من خلال مكبتة qr_flutter 

بعد اضافة المكتبات السابقة الى مشروعك دعونا الان نبدء باول خطوة وهيا توليد رمز qr والطريقة بسيطه جدا وذلك يكون يكون عن طريق مكتبة qr_flutter  بكل بساطة بعد تفعيل المكتبة لديك سوف تشاهد وجود خاصية Qr_image وهذا سوف يكون الخاص بتوليد الqr وهنا قمنا بتوليد محتوى نصي نقوم بكتابته كما هو موضح .

Qr.dart

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:tfluttert/constants/constants.dart';
import 'package:tfluttert/page.dart';

class TestPage extends StatefulWidget {
  TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  var controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(
        backgroundColor: Colors.grey[900],
        title: Text('Qc Code Generator'),
      ),
      body: Center(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(24),
          child: Column(
            children: [
              QrImage(
                data: controller.text,
                size: 200,
                backgroundColor: Colors.white,
              ),
              SizedBox(
                height: 40,
              ),
              buildTextForm(context),
              SizedBox(
                height: 40,
              ),
              MaterialButton(
                onPressed: () {
                  navToPush(context, PagePage());
                },
                child: Text('intent'),
                color: Colors.grey,
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget buildTextForm(BuildContext context) {
    return TextField(
      controller: controller,
      style: TextStyle(fontSize: 20, color: Colors.white),
      decoration: InputDecoration(
          hintText: 'Enter Text',
          hintStyle: TextStyle(
            color: Colors.grey,
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(color: Colors.white),
          ),
          focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(
            color: Theme.of(context).accentColor,
          )),
          suffixIcon: IconButton(
            onPressed: () {
              setState((){});
            },
            icon: Icon(
              Icons.done,
              size: 30,
            ),
          )),
    );
  }
}

كيفية قراءة QR ومعرفة ماذا يحتوي بداخله باستخدام Flutter

الجزء الثاني وهو لقراءة الqr بكل بساطة عندما يتم وضع المؤشر على الcode يقرأ العنصر وايضا يوجد فلاش اذا كنت تريد ان تزيد من الضوء كما هو موضح يمكنك استخدام الكود التاليه لقراءة اي qr ترغب به والنتيجه سوف تكون عن محتوى نصي كما هو موضح يمكنك تغيير النتيجه الى رابط صفحة او غيره في النهايه الكود راجع لك .

ui.dart

import 'dart:io';

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

class PagePage extends StatefulWidget {
  const PagePage({Key? key}) : super(key: key);

  @override
  State<PagePage> createState() => _PagePageState();
}

class _PagePageState extends State<PagePage> {
  final qrkey = GlobalKey(debugLabel: 'QR');
  Barcode? barcode;
  QRViewController? controller;

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

  @override
  void reassemble()async{
    super.reassemble();
    if (Platform.isAndroid) {
      await controller!.pauseCamera();
    }
    controller!.resumeCamera();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          buildQr(context),
          Positioned(bottom: 10,child: buildResult(context),),
          Positioned(top: 30,child: buildControlButton(context),),
        ],
      ),
    );
  }

  Widget buildQr(BuildContext context) {
    // Qr detect Design
      return QRView(
          overlay: QrScannerOverlayShape(
            cutOutSize: MediaQuery.of(context).size.width *0.8,
            borderWidth: 10,
            borderLength: 20,
            borderRadius: 10,
            borderColor: Theme.of(context).accentColor,
          ),
          key: qrkey, onQRViewCreated: onQRViewCreated);
  }
  
  // after detect barcode
  void onQRViewCreated(QRViewController controller) {
    setState(()=> this.controller = controller);
    controller.scannedDataStream.listen((event)=> setState(()=> barcode = event));

  }

  // result after barcode
  Widget buildResult(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(12.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white24,
      ),
      child: Text(
        barcode!=null ? 'result  : ${barcode!.code}':'Scan a code !',
            maxLines: 3,
      ),
    );
  }
  
  // flash and camera
  Widget buildControlButton(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white24,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          // after click ti open flash
          IconButton(onPressed: () async {
            await controller?.toggleFlash();
            setState((){});

          },
              // flash is on snapshot.data else Icons.flash_off
              icon: FutureBuilder<bool?>(
                future: controller?.getFlashStatus(),
                builder: (context,snapshot) {
                  if (snapshot.data !=null) {
                    return Icon(snapshot.data! ? Icons.flash_on  : Icons.flash_off);
                  } else {
                  return Container();
                  }
                },)),
          
          // change camera after click
          IconButton(onPressed: ()async{
            await controller?.flipCamera();
            setState((){});
          }, icon: FutureBuilder<bool?>(
            future: controller?.getFlashStatus(),
            builder: (context,snapshot) {
              if (snapshot.data !=null) {
                return Icon(Icons.switch_camera);
              } else {
                return Container();
              }
            },
          )),
        ],
      ),
    );
  }
}

مزيد من المقالات

• تصميم صفحة sign in و sign up بإستخدام animation في flutter
• كيفية وضع العناصر فوق بعض في فلاتر بدون مكتبات باستخدام Stack
•  التعديل على زر الرجوع للخلف في فلاتر
• شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحات
•  تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه

تثبيت flutter تحميل flutter dartsdk شركة تطبيقات الجوال

تعديل المقال