شرح طباعة فاتوره للمتاجر من خلال Flutter عن طريق البلوتوث

شرح طباعة فاتوره للمتاجر من خلال Flutter عن طريق البلوتوث

شرح طباعة فاتوره للمتاجر من خلال Flutter عن طريق البلوتوث

Flutter هي تقنية برمجة مفتوحة المصدر من Google تسمح لك بإنشاء تطبيقات Android و iOS وويب باستخدام لغة برمجة واحدة فقط. تتميز Flutter بمجموعة أدوات قوية لإنشاء واجهة مستخدم جذابة وتفاعلية برمجه جوجل تقنية فلاتر والتي تدعم لغة الدارات من اجل تسهيل الامر على المبرمجين في عملية انشاء التطبيقات بدلا من استخدام لغة البرمجة للاندرويد واخرى لنظام ios وهذا يكلف العميل وايضا يتعب المبرمج فيمكنك اعتماد لغة الدرات كـ لغة برمجة الاندرويد لان تقنية Flutter سوف تنفذ لك المطلوب .

يمكن أن تكون الفواتير مهمة للتجار لتسجيل المبيعات وإدارة المخزون. ومع ذلك، يمكن أن تكون عملية طباعة الفواتير باستخدام الأجهزة التقليدية صعبة ومملة.


في هذا الموضوع، سنناقش كيفية طباعة فاتورة للمتاجر من خلال Flutter. سنغطي الموضوعات التالية:

مكونات الفاتورة

كيفية إنشاء فاتورة في Flutter

كيفية طباعة فاتورة في Flutter

مكونات الفاتورة


تتكون الفاتورة عادةً من العناصر التالية:

العنوان: اسم وعنوان التاجر.

رقم الفاتورة: رقم فريد للفاتورة.

تاريخ الفاتورة: تاريخ إنشاء الفاتورة.

اسم العميل: اسم العميل.

عنوان العميل: عنوان العميل.

عناصر الفاتورة: قائمة بالمنتجات أو الخدمات المباعة وأسعارها.

الإجمالي: إجمالي قيمة الفاتورة.

الخصم: أي خصومات مقدمة للعميل.

المبلغ المستحق: المبلغ الذي يجب على العميل دفعه.


كيفية إنشاء فاتورة في Flutter ؟

اضف المكتبات التاليه

flutter pub add print_bluetooth_thermal

flutter pub add esc_pos_utils


اضف الاكواد التاليه داخل ملفات ios حتى تستطيع تنفيذ العملية من اجهزة apple

ios > Runner > info.plist


 <key>NSBluetoothAlwaysUsageDescription</key>

<string>Bluetooth access to connect 58mm or 80mm thermal printers</string>


اضف السطر التالي في AndroidManifest.xml

<uses-permission android:name= "android.permission.BLUETOOTH_CONNECT"/>

ليصبح بالشكل التالي
  <manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name= "android.permission.BLUETOOTH_CONNECT"/>
    <application
android:label="example"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>
وهذه الاكواد لاستخدام المكتبة في صفحة ال main
import 'package:print_bluetooth_thermal/print_bluetooth_thermal.dart';
await PrintBluetoothThermal.pairedBluetooths;

ويفضل وضعها بالشكل التالي



قم بعمل class يحتوي على البيانات التاليه

The “BluetoothInfo” class has two fields; “name” and “macAdress”.



كيفية طباعة فاتورة في Flutter ؟


والان بعد معرفة الجهاز ناتي لمرحلة الاتصال بالجهاز
await connect(macPrinterAddress: mac);

وهذه الداله ترجع لنا اذا كان هناك مشكلة او نجحت العملية


والان نضع الاكواد الخاصه بعملية الطباعة

import 'package:esc_pos_utils_plus/esc_pos_utils.dart';

 

CapabilityProfile profile = await CapabilityProfile.load();
Generator generator = Generator(PaperSize.mm80, profile);

والان سوف نجدد ما نحتاج لطباعته وذلك يكون من خلال عمل list بها البيانات

List<int> bytes = [];

وبالنسبة للصورة يمكنك ارفاقها عن طريق الامر التالي

ByteData imageByteData = await rootBundle.load("assets/images/${imagePath}");
Uint8List imageBytesUint8List = imageByteData.buffer.asUint8List();

ويجب عليك استخدام مكتبة image

image: ^3.2.0 

والان لاستخدام الصورة في import

import 'package:flutter/material.dart' hide Image;
import 'package:image/image.dart' as image;

والان ناتي لمرحلة تحويل الصورة الى decode

// With as
image.Image image = image.decodeImage(imageBytesUint8List)!;

// With hide
Image image = decodeImage(imageBytesUint8List)!;
bytes += generator.image(image);

bytes += generator.text("My First Printing"),
        styles: const PosStyles(bold: true, underline: true));

لعمل تصميم معين للخط والبيانات



الشكل النهائي للكود
bytes += generator.row([
      PosColumn(text: "Header 1", width: 4, styles: PosStyles(bold: true, underline: false)),
      PosColumn(text: "Header 2", width: 4, styles: PosStyles(bold: true, underline: false)),
      PosColumn(text: "Header 3", width: 4, styles: PosStyles(bold: true, underline: false)),
    ]);

bytes += generator.hr();
bytes += generator.hr();

bytes += generator.row([
      PosColumn(text: "R1,Cell 1", width: 4),
      PosColumn(text: "R1,Cell 2", width: 4),
      PosColumn(text: "R1,Cell 3", width: 4),
    ]);

bytes += generator.hr();

bytes += generator.row([
      PosColumn(text: "R2,Cell 4", width: 4),
      PosColumn(text: "R2,Cell 5", width: 4),
      PosColumn(text: "R2,Cell 6", width: 4),
    ]);

bytes += generator.hr();
ولكي تقوم بعملية الطباعة

await PrintBluetoothThermal.writeBytes(bytes);

النتيجة النهائيه


مصادر اخرى لمساعدتك

تعليقات