Flutter GetX initialise translation source from a remote server?

Question

I'm trying to use getX as flutter state management tool. GetX has its way handling language translation. One thing that I'm not sure is how could I initialise translation source from a remote server instead of hard code the translations. In such a way, I have the benefit of modifying translation without the need to release a new app.

Any suggest are welcome. Thanks.

score 2 · Accepted Answer · answered Mar 27 '21 at 18:39

I have DotNet WebAPI backend and I am sending translations like the following format:

[ApiController]
[Route("[controller]")]
public class TranslationsController : ControllerBase
{
    [HttpGet]
    public async Task<IActionResult> GetAll()
    {
        return Ok(new
        {
            en_US = new
            {
                hi = "Hi",
                bye = "Bye"
            },
            bn_BD = new
            {
                hi = "ওহে",
                bye = "বিদায়"
            }
        });
    }
}

And my AppTranslations class:

class AppTranslations extends Translations {
  final Map<String, String> en_US;
  final Map<String, String> bn_BD;

  AppTranslations({required this.en_US, required this.bn_BD});

  static AppTranslations fromJson(dynamic json) {
    return AppTranslations(
    en_US: Map<String, String>.from(json["en_US"]),
    bn_BD: Map<String, String>.from(json["bn_BD"]),
   );
  }

 @override
 Map<String, Map<String, String>> get keys => {
    "en_US": en_US,
    "bn_BD": bn_BD,
  };
}

My TranslationProvider:

class TranslationProvider extends GetConnect {
  Future<AppTranslations?> getTranslations() async {
  final url = 'http://192.168.0.106:5000/translations';

  final response = await get(url, decoder: AppTranslations.fromJson);

   if (response.hasError) {
     return Future.error(response.statusText!);
    }

   return response.body;
  }
}

Then in my main function:

void main() async {
 final translationProvider = TranslationProvider();

 final translations = await translationProvider.getTranslations();

 runApp(MyApp(translations: translations!));
}

And here's my MyApp:

class MyApp extends StatelessWidget {
 final AppTranslations translations;

 const MyApp({Key? key, required this.translations}) : super(key: key);

 @override
 Widget build(BuildContext context) {
  return GetMaterialApp(
    translations: translations,
    locale: Locale("en_US"),
    home: MyHomePage(),
  );
 }
}

And you are done! Now you can update your translations in the API and the update will reflect on the app.

Great this solution works, but is there any possibility I can get the languages from api after the GerMaterialApp like inside splash screen, thanks. — Anas Iqbal, Sep 01 '21 at 07:56

score 1 · Answer 2 · answered Mar 23 '22 at 07:59

1

So, after month worth of digging around, apparently Getx had its own method to add translations on the fly.

apiProvider.get('/api/translations').then((value) {
      Get.clearTranslations();
      Get.addTranslations(value.data['languages']);
}

virtually, you can call this anywhere you want!

answered Mar 23 '22 at 07:59

Sacking sand

11
1

Should be the accepted answer. For the curious, the API: https://pub.dev/documentation/get/latest/get_utils_src_extensions_internacionalization/LocalesIntl.html – Dabbel Jun 20 '22 at 13:52

Flutter GetX initialise translation source from a remote server?

2 Answers2