Flutter how to detect device language?

Question

I have a question how can i detect device language and according to that when app starts initially give a proper language ? Please if possible provide an example with code.

Answer 1

Calling Localizations.localeOf(context).languageCode should return you the languageCode. MaterialApp creates and uses a default Localization if not provided and then you can call it after the MaterialApp to know the language it's currently using the device and update your app with that information with your State Managament.

My advice for a simple project would be to use this plugin for the VS IDE (or this for Android Studio, it's from the same author). After installing it just add the dependencies to your pubspec.yaml

dependencies:
  // Other dependencies...
  flutter_localizations:
    sdk: flutter

  ...

  flutter_intl:
    enabled: true
    class_name: S # Optional. Sets the name for the generated localization class. Default: S
    main_locale: en # Optional. Sets the main locale used for generating localization files. Provided value should comply with ISO-639-1 and ISO-3166-1 (e.g. "en", "en_GB"). Default: en

In Android Studio (I don't really know where in VS sorry) check Tools > Flutter intl (it should be at the end) and there you can initialize your project and add locales. There should be now a folder in your project lib/l10n with arb files, they look like JSON files, just add a a key with string. Create one for each locale you want and give them the string aprameters for each language

intl_en.arb { "name": "I have a Name" }

intl_es.arb { "name": "Yo tengo un Nombre" }

It should run the build automatically. After that create your Material App delegating S (the name of the code that will be generated, you can change the name later if you want).

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            localizationsDelegates: [
                S.delegate, //The class S
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: S.delegate.supportedLocales,
            title: 'Flutter Demo',
            home: MyHomePage(),
        );
    }
}

Now you can use it down in the Widget tree

class MyHomePage extends StatelessWidget{
   @override
   Widget build(BuildContext context){
     return Text(S.of(context).name) 
     // now it prints the string of name depending the language the device is
   }
}

If the device is in a language you don't support (for ex French in my case) it will use the default language of the class, en ('English), check main_locale in the pubspec if you want to use another as your default

Check this Example of how to use internationalization with JSON keys if you want to try something different.