اذهب إلى المحتوى
  • 0

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

Mohammed Abu Yousef

السؤال

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

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

Recommended Posts

  • 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

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

  • 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

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

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...