تعلم البرمجة باستخدام Flutter وإضافة دعم متعدد اللغات لتطبيقاتك

خطوات سهلة لتطبيق الترجمات المتعددة في تطبيقات الأندرويد باستخدام Flutter Localizations

أصبح تطوير تطبيقات الهاتف المحمول معقدًا بشكل متزايد مع تزايد الحاجة إلى دعم لغات متعددة لتلبية احتياجات المستخدمين في جميع أنحاء العالم. تعد مكتبة Flutter Localizations إحدى الأدوات القوية التي تساعد المطورين في هذا الصدد. سنناقش في هذه المقالة كيفية استخدام هذه المكتبة لتطوير تطبيقات Android والهواتف المحمولة مع التركيز على تطوير التطبيقات متعددة اللغات، وكيفية إعداد مشروع باستخدام Flutter init، وكيفية إضافة ملفات ترجمة متعددة إلى تطبيقك. طلب.

ما هي مكتبة التعريب Flutter؟

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

اهميه Flutter init

دعم متعدد اللغات: تتيح هذه المكتبة للمطورين إضافة ترجمات بلغات متعددة بسهولة

نص مخصص: يمكن تخصيص النص الموجود في التطبيق لعرض الترجمة الصحيحة بناءً على لغة المستخدم

سهلة الاستخدام: توفر المكتبة واجهة برمجة بسيطة وسهلة الاستخدام لإدارة الترجمات.

تثبيت اضافة Flutter init

تثبيت مكتبة flutter_localizations

dependencies:
flutter_localizations:
sdk: flutter
intl: ^0.19.0

dev_dependencies:
build_runner: ^2.4.10
flutter_gen_runner: ^5.4.0

flutter_gen:
output: lib\core\utils\resources
line_length: 80

إنشاء ملف l10n.yaml

واضف الاوامر التاليه بداخله وهي مسار اللغات .

arb-dir: lib/core/utils/localizer
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

إنشاء اكثر ملف للغات

lib/core/utils/localizer/app_ar.arb

بالنسبة لملفات اللغات يتم كتابة المحتويات كما هو موضح في جميع الملفات وسوف يتم انشاء ال key للاستخدام بشكل تلقائي عن طريق ctrl + s او عن طريق flutter pub get .

{
"allow": "Allow",
"data": "my {data}"
}

في هذا المسار قم بعمل اللغات التي تريدها وايضا لا تنسى اضافة الكلاس المسؤول عن عملية الترجمه وهو

localizer.dart

class Localizer {
  static const en = LocalizerData(name: _en, locale: Locale(_en));
  static const ar = LocalizerData(name: _ar, locale: Locale(_ar));

  static const _en = 'en';
  static const _ar = 'ar';

  static const languages = <Locale>[
    Locale(_en),
    Locale(_ar),
  ];


  static const localizationsDelegates = [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ];
}

class LocalizerData {
  final String name;
  final Locale locale;

  const LocalizerData({
    required this.name,
    required this.locale,
  });
}

إنشاء كلاس LocalizationDelegate

يجب إنشاء كلاس LocalizationDelegate الآن لتحميل الترجمات واستخدامها في التطبيق.

extension MediaQueryValues on BuildContext {
  AppLocalizations get locale => AppLocalizations.of(this)!;
}

محتويات ملف main

MaterialApp(
        localizationsDelegates: Localizer.localizationsDelegates,
        supportedLocales: Localizer.languages,
        locale: Localizer.en.locale,
        debugShowCheckedModeBanner: false,
      );

شرح الاستخدام في الكود

يؤدي تطوير تطبيقات الهاتف المحمول باستخدام Flutter Localizations إلى تحسين تجربة المستخدم بشكل كبير من خلال توفير دعم متعدد اللغات. يوفر استخدام Flutter init لإعداد المشروع وإضافة ملفات الترجمة بيئة تطوير منظمة وفعالة. باستخدام مكتبة Flutter Localizations، يمكن للمطورين تقديم تطبيقات تلبي احتياجات المستخدمين بمجموعة متنوعة من اللغات، مما يؤدي إلى توسيع نطاق تطبيقاتهم وزيادة فرص نجاحهم في الأسواق العالمية.

Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  context.locale.click,
                ),
                Text(
                  context.locale.data('Dart'),
                ),
              ],
            ),

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

تعديل المقال

GeeCoders - جي كودرس