شرح كيفية التعامل مع QR توليد وقراءة الباركود في فلاتر بكل سهوله
من اكثر الدروس التي يتم طلبها من قبل المبتدئين في تطوير التطبيقات وهيا اضافة Qr في تطبيقك للتعرف على العناصر من خلال الqr code الخاص بالعنصر وهذا الامر بسيط جدا في flutter حيث سوف نشرح لكم في هذه المقالة كيف نقوم بتنفيذ هذه العمليه بكل سهوله من خلال احد المكتبات الموجوده في flutter والتي تسهل علينا القيام بهذه العمليه كما هو موضح بالصورة الخاصه بالمقال
dependencies:
qr_flutter: ^4.0.0
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 اثناء الانتقال بين الصفحات
- تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه