الفكرة الأساسية هي:

• استخدام خاصية locale في MaterialApp: إذا كانت `locale` خالية ، فسيتم استخدام القيمة المحلية للنظام.
• نقوم بتحويل الـ root widget إلى Stateful سيؤدي ذلك إلى إعادة البناء بناءً على المكان والاتجاه اللذين نحددهما.
• نستخدم Scope Model لحفظ اللغة المستخدمه في التطبيق، ونقوم بتغيرها عندما يتطلب الأمر.

فلاتر لا يدعم سوى اللغة الإنجليزية بشكل إفتراضي، لذلك سنحتاج إلى إستخدام حزمة مثل flutter_localizations لإضافة الدعم للغات أخرى في MaterialApp بالإضافة إلى حزمة intl لإضافة ترجمات إلى النصوص.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl:
  intl_translation:
  
  cupertino_icons: ^0.1.2
  scoped_model: "^0.2.0"

dev_dependencies:
  flutter_test:
    sdk: flutter

نقوم بإحاطة التطبيق بـ scope model لحفظ / تغيير اللغة الحالية، وفصل الواجهة عن الكود المنطقي، ليسهل التعديل وصيانة التطبيق فيما بعد. ونقوم بعمل دالة changeDirection لتغير اللغة وإتجاه النص

import 'package:flutter/material.dart';
import 'package:scoped_example/my_app.dart';
import 'package:scoped_model/scoped_model.dart';

class ScopeModelWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel<AppModel>(model: AppModel(), child: MyApp());
  }
}

class AppModel extends Model {
  Locale _appLocale = Locale('ar');
  Locale get appLocal => _appLocale ?? Locale("ar");

  void changeDirection() {
    if (_appLocale == Locale("ar")) {
      _appLocale = Locale("en");
    } else {
      _appLocale = Locale("ar");
    }
    notifyListeners();
  }
}

نقوم بإضافة الخاصية locale إلى MaterialApp

في النهاية يمكن أن تضيف الدالة model.changeDirection(); إلى الخاصية onPressed ليتم تغير اللغة من الإنجليزية إلى العربية والعكس.

يمكنك أيضًا أن تقوم بتعديل الأكواد السابقة لتقبل الدالة changeDirection مدخل باسم اللغة "ar" أو "en" أو "fr" .. إلخ

ويمكنك الإطلاع على كود بسيط ومفتوح المصدر لتغير اللغة في صفحة تسجيل دخول من هذا المستودع.