• 0

تخزين لغة التطبيق المختارة وجعلها إفتراضية - فلاتر

قمت باستعمال حزمة جاهزة لتعدد اللغات في التطبيق، ما أريده أنه عندما يختار المستخدم تغيير اللغة من الإعدادات، عندما يقوم بقفل التطبيق ثم فتحة مرة أخرى، يظهر التطبيق باللغة الجديدة وليس باللغة الافتراضية للتطبيق.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

أولا يجب تنزيل الحزم التالية من pub.dev

intl: ^0.17.0
shared_preferences: ^0.5.12+4
provider: ^4.3.2+3
localstorage: ^3.0.6+9
intl_translation:
    git:
      url: https://github.com/nt4f04uNd/intl_translation

ثم تنشأ واجهة لعرض اللغات مثل 

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';
import '../../common/constants.dart';
import '../../generated/l10n.dart';
import '../../models/init_model.dart';

class Languages extends StatefulWidget {
  @override
  _LanguagesState createState() => _LanguagesState();
}

class _LanguagesState extends State<Languages> {
  @override
  Widget build(BuildContext context) {
    List<Widget> list = [];
    List<Map<String, dynamic>> languages = getAlllanguages(context);
    for (var i = 0; i < languages.length; i++) {
      list.add(
        Card(
          elevation: 0,
          margin: EdgeInsets.all(2),
          child: ListTile(
            leading: SvgPicture.asset(
              'assets/flags/${languages[i]["image"]}.svg',
              fit: BoxFit.cover,
              width: 30,
              height: 20,
            ),
            title: Text(languages[i]["name"]),
            onTap: () async {
              print(languages[i]["code"]);
              await Provider.of<InitModel>(context, listen: false)
                  .changeLanuguage(context, languages[i]["code"]);

              setState(() {});
            },
          ),
        ),
      );
    }
    /*return Consumer<AuthProvider>(builder: (context, user, child) {
      
    });*/
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text(
          S.of(context).language,
        ),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ...list,
          ],
        ),
      ),
    );
  }
}

ثم تنشأ قائمة اللغات و ممكن تخزنها في ملف اسمه constants.dart و تكون القائمة بهذا الشكل 

Function getAlllanguages = ([context]) {
  return [
    {
      "id": 1,
      "name": "English",
      "image": "en",
      "code": "en",
    },
    {
      "id": 2,
      "name": "Arabic",
      "image": "ar",
      "code": "ar",
    },
    {
      "id": 2,
      "name": "Iran",
      "image": "ir",
      "code": "fa",
    }
  ];
};

ثم يمكنك إنشاء Provider ليتم تغيير اللغة بدون إيقافه و تشغيله مرة أخرى 

class InitModel with ChangeNotifier {
  Map<String, dynamic> appConfig;
  bool isLoading = true;
  String message;
  String _locale = 'en';

  String get locale => _locale;

  final String key = "theme";
  SharedPreferences _preferences;
  bool _darkMode = false;

  bool get darkMode => _darkMode;

  InitModel() {
    _darkMode = false;
    _locale = 'en';
    _loadFromPreferences();
    _getLanguage();
  }

  _initialPreferences() async {
    if (_preferences == null)
      _preferences = await SharedPreferences.getInstance();
  }

  _savePreferences() async {
    await _initialPreferences();
    _preferences.setBool(key, _darkMode);
  }

  _loadFromPreferences() async {
    await _initialPreferences();
    _darkMode = _preferences.getBool(key) ?? false;
    notifyListeners();
  }

  toggleChangeTheme() {
    _darkMode = !_darkMode;
    _savePreferences();
    notifyListeners();
  }

  _getLanguage() async {
    await _initialPreferences();
    _locale = _preferences.getString('language') ?? 'en';
    notifyListeners();
  }

  Future<void> changeLanuguage(BuildContext context, String countryCode) async {

    await _initialPreferences();
    _locale = countryCode;
    _preferences.setString("language", _locale);
    /*try {
      SharedPreferences preferences = await SharedPreferences.getInstance();
      //_locale = countryCode;
      await preferences.setString('language', countryCode);
      final LocalStorage storage = new LocalStorage('locale');
      storage.setItem('locale', countryCode);
      _locale = preferences.getString('language');
      _savePreferences();
      return true;
    } catch (err) {
      return false;
    }*/
      notifyListeners();
  }

  void loadAppConfig() async {
    try {
      if (kAppConfig.indexOf('http') != -1) {
        final appJson = await http.get(Uri.encodeFull(kAppConfig),
            headers: {"Accept": "application/json"});
        appConfig = convert.jsonDecode(appJson.body);
      } else {
        final appJson = await rootBundle.loadString(kAppConfig);
        appConfig = convert.jsonDecode(appJson);
      }
      isLoading = false;
      notifyListeners();
    } catch (e) {
      isLoading = false;
      message = e.toString();
      notifyListeners();
    }
  }
}

class App {
  Map<String, dynamic> appConfig;
  App(this.appConfig);
}

ثم إضافة الكود التالي 

localizationsDelegates: [
RefreshLocalizations.delegate,
S.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
],
supportedLocales: S.delegate.supportedLocales,
//locale: Locale('fa'),
locale: Locale(value.locale),
localeResolutionCallback:
(Locale locale, Iterable<Locale> supportedLocales) {
  return locale;
  },

في MaterialApp, ثم تعريف 

final LocalStorage storage = new LocalStorage('locale');

في نفس الكلاس الذي يحتوي MaterialApp.

في البداية قد تواجهك صعوبات في تنفيذ هذا الكود لأنه متقدم جداً, وربما تواجهك بعض الأخطاء ولكن يمكننا بعد قيامك خطوة بخطوة من تنفيذ الأكواد من فعل ما تريد.

ملاحظة : جميع الأكواد مجربة ومستخدمة قبل ذلك.

التقاط.PNG

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

تمام شكرا جدا، لكن حتى ما لأعيد الموضوع تاني، أنا الحمد لله عملت زر بالتطبيق، فيه ثلاث لغات، لما تضغط على واحد فيهم بيشتغل تمام، يعني أنا خلصت الموضوع.

بس محتاج كيف أحفظ اللغة في local Storage وما يرجع للغة الانجليزية كل مرة

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 3 دقائق مضت قال Mohammed Abu Yousef:

تمام شكرا جدا، لكن حتى ما لأعيد الموضوع تاني، أنا الحمد لله عملت زر بالتطبيق، فيه ثلاث لغات، لما تضغط على واحد فيهم بيشتغل تمام، يعني أنا خلصت الموضوع.

بس محتاج كيف أحفظ اللغة في local Storage وما يرجع للغة الانجليزية كل مرة

لو لاحظت هنا Locale(value.locale), يمكنك جلب القيمة المخزنة في local storeage, ايضا لاحظ في Provider عند قمنا بتغيير اللغة قمنا بحفظها في Shared ثم تخزينها في local Storage 

_getLanguage() async {
    await _initialPreferences();
    _locale = _preferences.getString('language') ?? 'en';
    notifyListeners();
  }

وقمنا بوضع getter 

String _locale = 'en';

String get locale => _locale

لو راجعت الكود جيدا, لكان سهل عليم الأمر كثير.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن