Flutter multi-Language app with multiple page. (Internation­alizing Flutter apps)

[Pascal Fournier]

Hello to all!

I am creating a multi-language application. However, I do not find a tutorial on the web that would explain how to do it. 

I found tutorials to make a multi-language application for one page, but for many, I did not find.

 Do you have any suggestions? 

I want to detect the device language at first, but I also want to allow the user to change the language.

thanks a lot and have a great day !

Pascal

[Rabih M. ElBaba (Gmail)]

I can share my code when reach home if suitable for you; You can easily set a default language when open the application such as English Arabic etc.... but cannot capture the system localization.

Best Regards

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/0d6318c8-2dfb-4dbb-b0b9-a1ffd36650fa%40googlegroups.com.

[Rabih M. ElBaba (Gmail)]

Hello,

Sorry for the late reply. Kindly check the code below as per your request and be aware that the code is extracted from my project if you have any problem dont' hesitate to post back.

Add the below to your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl:
  intl_translation:
  scoped_model: ^1.0.1

Main.dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:myapp/translations.dart';
import 'package:scoped_model/scoped_model.dart';

class AppModel extends Model {
  Locale _appLocale = Locale('ar'); //-> check this param to en to open the default app in English
  Locale get appLocal => _appLocale ?? Locale("ar");

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

    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<AppModel>(
        builder: (context, child, model) => MaterialApp(
              debugShowCheckedModeBanner: false,
              locale: model.appLocal,
              localizationsDelegates: [
                const Translations(),
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
              ],
              supportedLocales: [
                const Locale('ar', ''),
                const Locale('en', ''),
              ],
              theme: new ThemeData(
                primarySwatch: Colors.red,
                accentColor: Colors.red,
                backgroundColor: Colors.red,
              ),
              home: new Center(TranslationBase.of(context).title),
            ));
  }
}

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

void main() => runApp(new ScopeModelWrapper());

translations.dart is below

import 'dart:async';

import 'package:flutter/foundation.dart' show SynchronousFuture;
import 'package:flutter/material.dart';

class TranslationBase {
  TranslationBase(this.locale);

  final Locale locale;

  static TranslationBase of(BuildContext context) {
    return Localizations.of<TranslationBase>(context, TranslationBase);
  }

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'lang': 'الإصدار العربي',
      'title': 'Flutter Team from Lebanon',
    },
    'ar': {
      'lang': 'English Version',
      'title': 'فريق فلاتر من لبنان',
    },
  };

  String get lang {
    return _localizedValues[locale.languageCode]['lang'];
  }

  String get title {
    return _localizedValues[locale.languageCode]['title'];
  }
}

class Translations extends LocalizationsDelegate<TranslationBase> {
  const Translations();

  @override
  bool isSupported(Locale locale) => ['en', 'ar'].contains(locale.languageCode);

  @override
  Future<TranslationBase> load(Locale locale) {
    // Returning a SynchronousFuture here because an async "load" operation
    // isn't needed to produce an instance of DemoLocalizations.
    return SynchronousFuture<TranslationBase>(TranslationBase(locale));
  }

  @override
  bool shouldReload(Translations old) => false;
}

finally, in order to be able to switch between English Version and others use the below

        new ScopedModelDescendant<AppModel>(
            builder: (context, child, model) => MaterialButton(
                  height: 60.0,
//                color: const Color.fromRGBO(119, 31, 17, 1.0),
                  child: new Text(
                    TranslationBase.of(context).lang,
                    style: new TextStyle(
                      color: Colors.black,
                      fontSize: 10.0,
                      fontWeight: FontWeight.w100,
                      letterSpacing: 0.3,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      model.changeDirection();
                    });
                  },
                )),

Best Regards

I love flutter

On Wed, Jun 26, 2019 at 10:47 PM Entrada <ent...@gmail.com> wrote:

Hi! I'm interested too!

Regards,

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAB%3DbB0O3pzjKkWPFOH_bU3JfrAZwYjc%3D1qzzcFaV-Tpp_7Z%3DoQ%40mail.gmail.com.

[Entrada]

Thanks a lot! I'll try this out.

Regards.

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAB%3DbB0M7Yoq%2B%3D56g7nj1imBb2QXU5YPT%2B5nMH%3D0ftQGc2oXpPw%40mail.gmail.com.

[Chris W]

If it's an app with a cloud hosted database you should store the translations there, so you can introduce new languages without updating the app.

[Rabih M. ElBaba (Gmail)]

Hello,

I forgot to attach a package, the correct dependencies are listed below

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  scoped_model: ^1.0.1
  intl:
  intl_translation:

Regarding your question about the translations, you can append the translations.dart by adding to the same map string _localizedValues.

For sure if you have any enhancements on the current mechanism I would be appreciated if you can share your experience.

Best Regards 

On Thu, Jun 27, 2019 at 5:53 PM Chris W <d...@wolf-mit-f.de> wrote:

If it's an app with a cloud hosted database you should store the translations there, so you can introduce new languages without updating the app.

--

You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/3143bb4f-4ec5-48d6-ba3d-0d2470304de5%40googlegroups.com.

[Entrada]

Thanks a lot!

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAB%3DbB0PgCBfvuMmFcWj9aAwFvOBqpfqGFM_8S-8bEob7J%2BtjYA%40mail.gmail.com.

[Pascal Fournier]

Thanks a lot for your good help ! 

I have a database on my server... Should i store all my translations there, so when the app start... i populate the lang files ? or i populate the current local(language) and if the user change the language, i will query again my database to get all translation ?

That way, does it slow my app start ?

thanks a lot ! 

Le jeudi 27 juin 2019 12:06:08 UTC-4, Rabih M. ElBaba (Gmail) a écrit :

Hello,

I forgot to attach a package, the correct dependencies are listed below

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  scoped_model: ^1.0.1
  intl:
  intl_translation:

Regarding your question about the translations, you can append the translations.dart by adding to the same map string _localizedValues.

For sure if you have any enhancements on the current mechanism I would be appreciated if you can share your experience.

Best Regards 

On Thu, Jun 27, 2019 at 5:53 PM Chris W <d...@wolf-mit-f.de> wrote:

If it's an app with a cloud hosted database you should store the translations there, so you can introduce new languages without updating the app.

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.

To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.

[Rabih M. ElBaba (Gmail)]

Hello,

If you have a lot of variables to be translated, you should check the JSON file when you downloaded and base on that you can decide if acceptable or not.. also it depends on the speed connection to your users.

Anyway, it is a good idea if you did some changes or you integrated with database kindly update us.

Best Regards 

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/b0ad9cfa-c2eb-403a-960e-b8173737302e%40googlegroups.com.

[Pascal Fournier]

Thanks a lot ! I appreciate it ! 

I will keep you informed when I have done my tests

Have a great weekend ! 

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/b0ad9cfa-c2eb-403a-960e-b8173737302e%40googlegroups.com.