شرح مكتبة zatca_fatoora_flutter في Flutter لإنشاء QR Code لفواتير ZATCA

عند تطوير تطبيقات Flutter التي تعمل في المملكة العربية السعودية، خصوصًا تطبيقات نقاط البيع POS والمتاجر والمطاعم والفواتير، قد تحتاج إلى إضافة QR Code متوافق مع متطلبات هيئة الزكاة والضريبة والجمارك ZATCA إلى الفاتورة.

بدلًا من كتابة منطق إنشاء QR Code وترميز البيانات بنفسك، يمكن استخدام مكتبة zatca_fatoora_flutter التي توفر طريقة مباشرة لإنشاء QR Code خاص بالفاتورة المبسطة وعرضه داخل تطبيق Flutter، مع إمكانية تخصيص شكل الـ QR Code أو بناء التصميم الخاص بك.

في هذا المقال سنتعرف على مكتبة zatca_fatoora_flutter، وطريقة تثبيتها، وطريقة إنشاء QR Code لفاتورة، وكيفية تخصيص الشكل وإضافة شعار المتجر، وكيفية استخدام Custom Builder، بالإضافة إلى شرح العلاقة بين الـ QR Code ومتطلبات ZATCA والفرق بين هذه المكتبة وبين نظام FATOORA الكامل.

ما هي مكتبة zatca_fatoora_flutter؟

مكتبة zatca_fatoora_flutter هي Package مخصصة لتطبيقات Flutter بهدف إنشاء QR Code متوافق مع فاتورة ZATCA المبسطة، ويمكن استخدام الناتج لطباعته داخل الفاتورة أو إظهاره ضمن واجهة التطبيق.

المكتبة لا تعتبر نظام محاسبة أو نظام فواتير كاملًا، كما أنها ليست بديلًا عن التكامل الكامل مع منصة FATOORA. وظيفتها الأساسية هي التعامل مع بيانات الفاتورة وإنشاء QR Code وعرضه بطريقة جاهزة داخل Flutter. وهذا مهم جدًا عند اختيار المكتبة المناسبة حسب متطلبات المشروع.

ماذا توفر المكتبة؟

إنشاء QR Code بسيط لفاتورة ZATCA.
تخصيص مظهر QR Code.
إضافة Logo إلى QR Code.
تغيير حجم QR Code.
تغيير لون الـ QR Code.
تغيير لون الخلفية.
إمكانية جعل حدود QR Code دائرية.
إنشاء Custom QR Code Builder.
الحصول على بيانات QR Code داخل الـ Builder.

هذه هي الاستخدامات الأساسية المعلنة للمكتبة في صفحة الحزمة والمستودع الرسمي.

ما هو ZATCA QR Code؟

هيئة الزكاة والضريبة والجمارك ZATCA تحدد مجموعة من البيانات التي يجب أن يحتوي عليها QR Code الخاص بالفواتير الإلكترونية المبسطة، ويتم ترميز هذه البيانات باستخدام صيغة Tag-Length-Value (TLV) ثم ترميزها وفق المواصفات المحددة من الهيئة.

في المتطلبات الأساسية للفواتير الإلكترونية المبسطة تشمل البيانات:

اسم البائع.
رقم التسجيل الضريبي للبائع.
وقت وتاريخ إصدار الفاتورة.
إجمالي الفاتورة شامل ضريبة القيمة المضافة.
إجمالي ضريبة القيمة المضافة.

وقد أضافت متطلبات المرحلة اللاحقة حقولًا تقنية إضافية لبعض حالات الفواتير والتكامل مع ZATCA، مثل Hash وECDSA والتوقيع والمفتاح العام.

هل المكتبة تنفذ نظام ZATCA بالكامل؟

لا ينبغي اعتبار zatca_fatoora_flutter نظام FATOORA كاملًا.

المكتبة مخصصة بشكل أساسي لإنشاء QR Code لفاتورة ZATCA المبسطة وعرضه، بينما التكامل الكامل مع متطلبات الفوترة الإلكترونية، مثل إنشاء XML وتوقيعه والتعامل مع متطلبات المرحلة الثانية والتكامل مع أنظمة ZATCA، يحتاج إلى أدوات ومنظومة أوسع.

لذلك إذا كان مشروعك مجرد تطبيق POS يحتاج إلى إنشاء QR Code وعرضه أو طباعته داخل الفاتورة، فهذه هي الوظيفة التي تستهدفها المكتبة. أما إذا كان المطلوب تنفيذ دورة الفوترة الإلكترونية الكاملة، فيجب دراسة متطلبات مشروعك والمرحلة المطبقة عليه بشكل مستقل.

تثبيت مكتبة zatca_fatoora_flutter

يمكن إضافة المكتبة باستخدام:

flutter pub add zatca_fatoora_flutter

أو من خلال ملف pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  zatca_fatoora_flutter: ^1.0.0

ثم قم بتنفيذ:

flutter pub get

الإصدار المستقر الموجود حاليًا على صفحة الحزمة هو 1.0.0، وتستخدم المكتبة Flutter وpretty_qr_code ضمن الاعتمادات.

استيراد المكتبة داخل Flutter

import 'package:zatca_fatoora_flutter/zatca_fatoora_flutter.dart';

بعد ذلك يمكنك استخدام ZatcaFatoora لإنشاء QR Code.

إنشاء QR Code بسيط

أبسط استخدام للمكتبة هو إنشاء QR Code باستخدام بيانات الفاتورة.

ZatcaFatoora.simpleQRCode(
  fatooraData: ZatcaFatooraDataModel(
    businessName: 'My Store',
    vatRegistrationNumber: '323456789123453',
    date: DateTime.now(),
    totalAmountIncludingVat: 50.75,
  ),
)

وهذا هو المثال الأساسي الموجود في التوثيق الرسمي للمكتبة.

شرح ZatcaFatooraDataModel

في المثال الرسمي يتم تمرير مجموعة من البيانات الأساسية إلى ZatcaFatooraDataModel:

ZatcaFatooraDataModel(
  businessName: 'My Store',
  vatRegistrationNumber: '323456789123453',
  date: DateTime.now(),
  totalAmountIncludingVat: 50.75,
)

والقيم المستخدمة في المثال هي:

businessName اسم المنشأة.
vatRegistrationNumber الرقم الضريبي.
date تاريخ ووقت الفاتورة.
totalAmountIncludingVat إجمالي الفاتورة شامل الضريبة.

يجب أن تكون هذه البيانات مأخوذة من بيانات الفاتورة الفعلية في مشروعك، وليس بيانات تجريبية، عند استخدام المكتبة في تطبيق إنتاجي. المثال الرسمي للحزمة يوضح نفس الحقول عند إنشاء QR Code.

عرض QR Code داخل فاتورة Flutter

يمكن وضع الـ QR Code داخل أي Widget مثل Column أو أو صفحة طباعة الفاتورة.

Scaffold(
  appBar: AppBar(
    title: const Text('ZATCA Invoice'),
  ),
  body: Center(
    child: ZatcaFatoora.simpleQRCode(
      fatooraData: ZatcaFatooraDataModel(
        businessName: 'My Store',
        vatRegistrationNumber: '323456789123453',
        date: DateTime.now(),
        totalAmountIncludingVat: 150.00,
      ),
    ),
  ),
)

بهذا الأسلوب يظهر QR Code مباشرة داخل الصفحة ويمكن وضعه في تصميم الفاتورة قبل تنفيذ عملية الطباعة.

تخصيص QR Code وإضافة شعار المتجر

من المميزات المهمة في المكتبة إمكانية استخدام styledQRCode بدلًا من simpleQRCode للحصول على QR Code بتصميم مخصص.

ZatcaFatoora.styledQRCode(
  fatooraData: ZatcaFatooraDataModel(
    businessName: 'My Store',
    vatRegistrationNumber: '323456789123453',
    date: DateTime.now(),
    totalAmountIncludingVat: 150.00,
  ),
  qrStyleData: QRStyleData(
    image: const AssetImage(
      'assets/images/logo.jpeg',
    ),
    size: 200,
    backgroundColor:
        Colors.green.withOpacity(.1),
    qrColor: Colors.green,
    isBorderShapeRounded: true,
  ),
)

المثال السابق يعتمد على API الرسمي للمكتبة ويتيح تخصيص الصورة والحجم والألوان وشكل الحدود.

إضافة Logo إلى QR Code

إذا كان لديك شعار للمتجر يمكنك إضافته داخل الـ QR Code من خلال:

qrStyleData: QRStyleData(
  image: const AssetImage(
    'assets/images/logo.jpeg',
  ),
  size: 200,
)

ويجب التأكد من إضافة الصورة إلى قسم assets في ملف pubspec.yaml:

flutter:
  assets:
    - assets/images/logo.jpeg

بعدها يمكن استخدام الصورة داخل QRStyleData كما يوضح المثال الرسمي للمكتبة.

تغيير حجم QR Code

يمكن تغيير الحجم من خلال:

QRStyleData(
  size: 250,
)

وهذا مفيد عند تصميم الفاتورة للطباعة على أحجام مختلفة مثل 58mm أو 80mm، بحيث تستطيع تحديد مساحة مناسبة للـ QR Code داخل التصميم.

تغيير لون QR Code

QRStyleData(
  qrColor: Colors.black,
)

ويمكنك استخدام أي لون مناسب للتصميم، ولكن في الفواتير المطبوعة يجب الاهتمام بدرجة التباين وجودة الطباعة حتى يظل QR Code سهل القراءة بواسطة تطبيقات المسح.

تغيير لون الخلفية

QRStyleData(
  backgroundColor: Colors.grey.shade100,
)

يمكن استخدام هذه الخاصية لإعطاء مساحة بصرية مختلفة حول QR Code.

جعل حدود QR Code دائرية

QRStyleData(
  isBorderShapeRounded: true,
)

وهذه الخاصية جزء من إعدادات QRStyleData الموجودة في المثال الرسمي للمكتبة.

استخدام Custom QR Code Builder

إذا لم يكن التصميم الافتراضي كافيًا، توفر المكتبة طريقة أكثر مرونة من خلال customQRCode.

ZatcaFatoora.customQRCode(
  fatooraData: ZatcaFatooraDataModel(
    businessName: 'My Store',
    vatRegistrationNumber: '323456789123453',
    date: DateTime.now(),
    totalAmountIncludingVat: 150.00,
  ),
  builder: (
    BuildContext context,
    String qrData,
    Widget qrCode,
  ) {
    return Container(
      padding: const EdgeInsets.all(30),
      decoration: BoxDecoration(
        borderRadius:
            BorderRadius.circular(15),
        color: Colors.grey.shade200,
        border: Border.all(
          color: Colors.grey.shade300,
        ),
      ),
      child: qrCode,
    );
  },
)

الـ Builder يعطيك الوصول إلى qrData وqrCode، وبالتالي يمكنك وضع QR Code الناتج داخل أي تصميم خاص بك. وهذه الوظيفة موضحة مباشرة في README الرسمي للمكتبة.

ما الفرق بين simpleQRCode وstyledQRCode وcustomQRCode؟

المكتبة توفر ثلاثة أساليب رئيسية:

simpleQRCode لإنشاء QR Code بسيط بأقل إعدادات.
styledQRCode عندما تريد التحكم في اللون والحجم والصورة وشكل التصميم.
customQRCode عندما تريد التحكم الكامل في الـ Widget الذي يحتوي QR Code.

وهذه الوظائف الثلاثة هي الاستخدامات الأساسية التي يوفرها المشروع الرسمي.

استخدام المكتبة مع تطبيق POS

تعتبر هذه المكتبة مناسبة جدًا لتطبيقات نقاط البيع POS، لأن بيانات الفاتورة تكون موجودة أصلًا داخل التطبيق، وكل ما تحتاج إليه هو تحويل البيانات المطلوبة إلى QR Code وعرضه ضمن الفاتورة.

مثلًا بعد إغلاق الفاتورة يمكن إنشاء:

final qrCode = ZatcaFatoora.simpleQRCode(
  fatooraData: ZatcaFatooraDataModel(
    businessName: invoice.businessName,
    vatRegistrationNumber:
        invoice.vatRegistrationNumber,
    date: invoice.date,
    totalAmountIncludingVat:
        invoice.totalAmount,
  ),
);

ثم وضع qrCode داخل Widget الفاتورة التي سيتم تحويلها إلى صورة أو PDF أو طباعتها بالطابعة الحرارية.

استخدام QR Code داخل فاتورة حرارية

في تطبيقات POS التي تستخدم طابعات حرارية، غالبًا لا تقوم الطابعة بعرض Widget Flutter مباشرة، وإنما تحتاج إلى تحويل التصميم إلى صورة أو بيانات مناسبة للطباعة.

يمكن استخدام المكتبة لإنشاء Widget الـ QR Code، ثم تحويل المنطقة المطلوبة من الفاتورة إلى صورة باستخدام أسلوب التصوير أو التحويل المناسب لمكتبة الطباعة التي تستخدمها.

بهذا يصبح تدفق الفاتورة:

Invoice Data
      ↓
ZatcaFatooraDataModel
      ↓
ZatcaFatoora
      ↓
QR Code Widget
      ↓
Invoice UI
      ↓
Image / PDF / Thermal Printer

استخدام المكتبة في تطبيقات المتاجر

يمكن استخدامها في:

تطبيقات نقاط البيع POS.
تطبيقات المطاعم والكافيهات.
تطبيقات المتاجر الإلكترونية التي تعرض الفواتير.
تطبيقات إدارة المبيعات.
تطبيقات إصدار الفواتير في السعودية.
تطبيقات البيع بالتجزئة.
أنظمة الفواتير المطبوعة.

إنشاء فاتورة ديناميكية من API

في التطبيقات الكبيرة غالبًا تكون بيانات الفاتورة قادمة من Backend.

مثل:

{
  "businessName": "My Store",
  "vatNumber": "323456789123453",
  "invoiceDate": "2026-09-24T10:30:00",
  "total": 150.00
}

بعد تحويل البيانات إلى Model يمكنك إنشاء QR Code:

ZatcaFatoora.simpleQRCode(
  fatooraData: ZatcaFatooraDataModel(
    businessName: data.businessName,
    vatRegistrationNumber:
        data.vatNumber,
    date: data.invoiceDate,
    totalAmountIncludingVat:
        data.total,
  ),
)

وهذا يجعل الـ QR Code جزءًا من نظام الفواتير الديناميكي بدل كتابة البيانات يدويًا.

هل تحتاج إلى Backend لاستخدام المكتبة؟

لا، لا تحتاج إلى Backend فقط من أجل إنشاء QR Code من هذه المكتبة.

يمكن للتطبيق إنشاء QR Code مباشرة من بيانات الفاتورة الموجودة محليًا.

لكن في الأنظمة الحقيقية قد تكون بيانات الفاتورة نفسها قادمة من Backend، أو قد تحتاج إلى معالجة إضافية مرتبطة بنظامك المحاسبي أو متطلبات التكامل مع ZATCA.

بالتالي يمكن أن تكون المكتبة جزءًا من طبقة الـ UI أو الطباعة، بينما يبقى نظام الفواتير والـ Backend مسؤولًا عن بقية العمليات.

هل يجب أن أكتب TLV بنفسي؟

عند استخدام هذه المكتبة، الهدف هو أن تقوم بتمرير بيانات الفاتورة إلى API الخاصة بالمكتبة بدل كتابة عملية إنشاء QR Code يدويًا من الصفر.

أما على مستوى المواصفات، فإن ZATCA تستخدم تنسيق TLV لترميز بيانات QR Code، حيث يحتوي كل Tag على رقم وقيمة وطول القيمة المشفرة بصيغة UTF-8.

لذلك من الأفضل التعامل مع بيانات QR من خلال المكتبة وفق API الخاص بها وعدم تعديل محتوى QR بطريقة تؤدي إلى مخالفة بنية البيانات المطلوبة.

ملاحظة مهمة حول ZATCA والمرحلة الثانية

من المهم عدم الخلط بين QR Code للفواتير المبسطة وبين التكامل الكامل مع FATOORA.

وثائق ZATCA الحالية توضح أن هناك حقولًا إضافية مرتبطة بالمرحلة الثانية والتكامل، مثل Hash وECDSA والتوقيع والمفتاح العام ومتطلبات إضافية لبعض الفواتير والمراحل الزمنية.

لذلك عند بناء نظام إنتاجي يجب مراجعة متطلبات ZATCA المطبقة على نشاطك ونوع فواتيرك والمرحلة التي أنت مطالب بها، ولا ينبغي اعتبار وجود QR Code وحده دليلًا على أن النظام بالكامل متوافق مع جميع متطلبات الفوترة الإلكترونية.

التحقق من بيانات الفاتورة قبل إنشاء QR

قبل إرسال البيانات إلى المكتبة من الأفضل التأكد من أن:

اسم المنشأة صحيح.
الرقم الضريبي صحيح.
تاريخ الفاتورة صحيح.
إجمالي الفاتورة محسوب بشكل صحيح.
بيانات الضريبة متوافقة مع بيانات الفاتورة الحقيقية.

ويجب أن تكون البيانات المستخدمة في QR مرتبطة بالفعل بالفاتورة التي تتم طباعتها للمستخدم.

مثال كامل على فاتورة مع QR Code

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

class InvoicePage extends StatelessWidget {
  const InvoicePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final invoiceDate = DateTime.now();

    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'ZATCA Invoice',
        ),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            width: 360,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius:
                  BorderRadius.circular(12),
              border: Border.all(
                color: Colors.grey.shade300,
              ),
            ),
            child: Column(
              children: [
                const Text(
                  'My Store',
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                const SizedBox(
                  height: 8,
                ),

                const Text(
                  'Tax Invoice',
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ),

                const SizedBox(
                  height: 20,
                ),

                const Divider(),

                const ListTile(
                  title: Text('Subtotal'),
                  trailing: Text('130.43 SAR'),
                ),

                const ListTile(
                  title: Text('VAT'),
                  trailing: Text('19.57 SAR'),
                ),

                const ListTile(
                  title: Text(
                    'Total',
                    style: TextStyle(
                      fontWeight:
                          FontWeight.bold,
                    ),
                  ),
                  trailing: Text(
                    '150.00 SAR',
                    style: TextStyle(
                      fontWeight:
                          FontWeight.bold,
                    ),
                  ),
                ),

                const Divider(),

                const SizedBox(
                  height: 16,
                ),

                ZatcaFatoora.simpleQRCode(
                  fatooraData:
                      ZatcaFatooraDataModel(
                    businessName:
                        'My Store',
                    vatRegistrationNumber:
                        '323456789123453',
                    date: invoiceDate,
                    totalAmountIncludingVat:
                        150.00,
                  ),
                ),

                const SizedBox(
                  height: 12,
                ),

                const Text(
                  'ZATCA E-Invoice',
                  textAlign:
                      TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

إنشاء QR Code بتصميم مخصص

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

class StyledZatcaQr extends StatelessWidget {
  const StyledZatcaQr({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ZatcaFatoora.styledQRCode(
        fatooraData:
            ZatcaFatooraDataModel(
          businessName:
              'My Store',
          vatRegistrationNumber:
              '323456789123453',
          date:
              DateTime.now(),
          totalAmountIncludingVat:
              250.00,
        ),
        qrStyleData: QRStyleData(
          image: const AssetImage(
            'assets/images/logo.jpeg',
          ),
          size: 220,
          backgroundColor:
              Colors.black12,
          qrColor:
              Colors.black,
          isBorderShapeRounded:
              true,
        ),
      ),
    );
  }
}

إنشاء Custom QR Code Builder

ZatcaFatoora.customQRCode(
  fatooraData:
      ZatcaFatooraDataModel(
    businessName:
        'My Store',
    vatRegistrationNumber:
        '323456789123453',
    date:
        DateTime.now(),
    totalAmountIncludingVat:
        250.00,
  ),
  builder: (
    BuildContext context,
    String qrData,
    Widget qrCode,
  ) {
    return Container(
      padding:
          const EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius:
            BorderRadius.circular(16),
        color:
            Colors.white,
        border:
            Border.all(
          color:
              Colors.grey.shade300,
        ),
      ),
      child: Column(
        children: [
          const Text(
            'Scan Invoice',
            style: TextStyle(
              fontWeight:
                  FontWeight.bold,
              fontSize: 18,
            ),
          ),

          const SizedBox(
            height: 16,
          ),

          qrCode,

          const SizedBox(
            height: 12,
          ),

          const Text(
            'ZATCA E-Invoice',
          ),
        ],
      ),
    );
  },
)

إضافة المكتبة إلى مشروع Flutter

dependencies:
  flutter:
    sdk: flutter

  zatca_fatoora_flutter: ^1.0.0

إضافة Logo للمشروع

flutter:
  assets:
    - assets/images/logo.jpeg

الخلاصة

مكتبة zatca_fatoora_flutter تقدم طريقة سهلة لإضافة QR Code خاص بفواتير ZATCA المبسطة داخل تطبيقات Flutter، وهي مناسبة بشكل خاص لتطبيقات POS وأنظمة المبيعات التي تحتاج إلى عرض QR Code داخل الفاتورة أو طباعته معها.

وتوفر المكتبة ثلاث طرق أساسية للاستخدام: simpleQRCode لإنشاء QR Code بسيط، وstyledQRCode لتخصيص شكله وإضافة شعار وألوان، وcustomQRCode لبناء واجهة مخصصة حول QR Code.

كما أن استخدامها لا يتطلب Backend بشكل مباشر من أجل إنشاء QR Code؛ إذ يمكنك تمرير بيانات الفاتورة الموجودة داخل تطبيق Flutter مباشرة إلى ZatcaFatooraDataModel.

لكن يجب التمييز بين إنشاء QR Code للفواتير المبسطة وبين تنفيذ منظومة الفوترة الإلكترونية الكاملة ومتطلبات FATOORA والمرحلة الثانية. متطلبات ZATCA قد تشمل حقولًا وتوقيعات وعمليات تكامل إضافية بحسب نوع الفاتورة والمرحلة المطبقة على المنشأة.

إذا كنت تعمل على مشروع Flutter في السعودية، خصوصًا مشروع POS أو Retail أو Restaurant، فإن zatca_fatoora_flutter يمكن أن تكون جزءًا من طبقة الفاتورة لديك لإنشاء وعرض QR Code، بينما تتم إدارة باقي عمليات الفوترة والتكامل وفق بنية النظام ومتطلبات ZATCA.

مكتبة zatca_fatoora_flutter على pub.dev

مستودع zatca_fatoora_flutter على GitHub

الموقع الرسمي لهيئة ZATCA

المزيد من مقالات Flutter على Geecoders

الكود كامل

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

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ZATCA Fatoora Flutter',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const InvoicePage(),
    );
  }
}

class InvoicePage
    extends StatelessWidget {
  const InvoicePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final invoiceDate =
        DateTime.now();

    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'ZATCA Invoice',
        ),
      ),
      body: Center(
        child: SingleChildScrollView(
          padding:
              const EdgeInsets.all(16),
          child: Column(
            children: [
              Container(
                width: 380,
                padding:
                    const EdgeInsets.all(20),
                decoration:
                    BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      BorderRadius.circular(
                    16,
                  ),
                  border: Border.all(
                    color:
                        Colors.grey.shade300,
                  ),
                ),
                child: Column(
                  children: [
                    const Text(
                      'My Store',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight:
                            FontWeight.bold,
                      ),
                    ),

                    const SizedBox(
                      height: 6,
                    ),

                    const Text(
                      'Simplified Tax Invoice',
                    ),

                    const SizedBox(
                      height: 20,
                    ),

                    const Divider(),

                    const Align(
                      alignment:
                          Alignment.centerLeft,
                      child: Text(
                        'Invoice No: INV-1001',
                      ),
                    ),

                    const SizedBox(
                      height: 10,
                    ),

                    const Align(
                      alignment:
                          Alignment.centerLeft,
                      child: Text(
                        'VAT No: '
                        '323456789123453',
                      ),
                    ),

                    const SizedBox(
                      height: 20,
                    ),

                    const Row(
                      mainAxisAlignment:
                          MainAxisAlignment
                              .spaceBetween,
                      children: [
                        Text(
                          'Subtotal',
                        ),
                        Text(
                          '130.43 SAR',
                        ),
                      ],
                    ),

                    const SizedBox(
                      height: 10,
                    ),

                    const Row(
                      mainAxisAlignment:
                          MainAxisAlignment
                              .spaceBetween,
                      children: [
                        Text(
                          'VAT',
                        ),
                        Text(
                          '19.57 SAR',
                        ),
                      ],
                    ),

                    const SizedBox(
                      height: 10,
                    ),

                    const Divider(),

                    const Row(
                      mainAxisAlignment:
                          MainAxisAlignment
                              .spaceBetween,
                      children: [
                        Text(
                          'Total',
                          style: TextStyle(
                            fontWeight:
                                FontWeight.bold,
                          ),
                        ),
                        Text(
                          '150.00 SAR',
                          style: TextStyle(
                            fontWeight:
                                FontWeight.bold,
                          ),
                        ),
                      ],
                    ),

                    const SizedBox(
                      height: 24,
                    ),

                    ZatcaFatoora
                        .simpleQRCode(
                      fatooraData:
                          ZatcaFatooraDataModel(
                        businessName:
                            'My Store',
                        vatRegistrationNumber:
                            '323456789123453',
                        date:
                            invoiceDate,
                        totalAmountIncludingVat:
                            150.00,
                      ),
                    ),

                    const SizedBox(
                      height: 12,
                    ),

                    const Text(
                      'ZATCA E-Invoice',
                      textAlign:
                          TextAlign.center,
                    ),
                  ],
                ),
              ),

              const SizedBox(
                height: 30,
              ),

              const Text(
                'Styled QR Code',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight:
                      FontWeight.bold,
                ),
              ),

              const SizedBox(
                height: 16,
              ),

              ZatcaFatoora
                  .styledQRCode(
                fatooraData:
                    ZatcaFatooraDataModel(
                  businessName:
                      'My Store',
                  vatRegistrationNumber:
                      '323456789123453',
                  date:
                      invoiceDate,
                  totalAmountIncludingVat:
                      150.00,
                ),
                qrStyleData:
                    QRStyleData(
                  size: 220,
                  backgroundColor:
                      Colors.grey.shade100,
                  qrColor:
                      Colors.black,
                  isBorderShapeRounded:
                      true,
                ),
              ),

              const SizedBox(
                height: 30,
              ),

              const Text(
                'Custom QR Code',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight:
                      FontWeight.bold,
                ),
              ),

              const SizedBox(
                height: 16,
              ),

              ZatcaFatoora
                  .customQRCode(
                fatooraData:
                    ZatcaFatooraDataModel(
                  businessName:
                      'My Store',
                  vatRegistrationNumber:
                      '323456789123453',
                  date:
                      invoiceDate,
                  totalAmountIncludingVat:
                      150.00,
                ),
                builder: (
                  BuildContext context,
                  String qrData,
                  Widget qrCode,
                ) {
                  return Container(
                    padding:
                        const EdgeInsets.all(
                      20,
                    ),
                    decoration:
                        BoxDecoration(
                      color:
                          Colors.grey.shade100,
                      borderRadius:
                          BorderRadius
                              .circular(16),
                      border:
                          Border.all(
                        color:
                            Colors.grey.shade300,
                      ),
                    ),
                    child: Column(
                      children: [
                        const Text(
                          'Scan this invoice',
                          style:
                              TextStyle(
                            fontWeight:
                                FontWeight.bold,
                          ),
                        ),

                        const SizedBox(
                          height: 16,
                        ),

                        qrCode,

                        const SizedBox(
                          height: 12,
                        ),

                        const Text(
                          'ZATCA Fatoora',
                        ),
                      ],
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  zatca_fatoora_flutter: ^1.0.0

إضافة الصور

flutter:
  assets:
    - assets/images/logo.jpeg

بعد إضافة المكتبة شغّل:

flutter pub get

مزيد من المقالات : تعلم Zustand في React.js: إدارة الحالة بسهولة مع تطبيق Todo عملي

مزيد من المقالات : حل نهائي لمشكلة مكتبات Flutter التي تعمل على نظام واحد فقط

شارك المقالة

شرح مكتبة zatca_fatoora_flutter في Flutter لإنشاء QR Code لفواتير ZATCA

شرح مكتبة zatca_fatoora_flutter في Flutter لإنشاء QR Code لفواتير ZATCA عند تطوير تطبيقات Flutter التي تعمل في المملكة العربية السعودية،…