Skip to main content
Logo Appt Light

Localization on Flutter

Assistive technologies, such as the screen reader, use the locale for the pronunciation of utterances. It is important to explictly set a locale for your app. An incorrect locale leads to unclear pronunciation. Also, setting a locale can help with displaying characters correctly.

With Flutter, you can use the various methods to load resources in your desired locale. This is especially important for users of screen readers. The example below shows a simple implementation to handle this without using any dependencies.

/// This is the main widget of the application
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();

  static _MyAppState of(BuildContext context) => context.findAncestorStateOfType<_MyAppState>();
}

class _MyAppState extends State<MyApp> {
  /// Private variable holding the current localization
  Locale _locale;

  /// Calling this method will initialize a re-draw of the entire widget tree.
  void setLocale(Locale value) {
    setState(() {
      _locale = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      home: LanguageButtons(),
    );
  }
}

class LanguageButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
          child: Text("Set locale to Dutch"),
          onPressed: () => MyApp.of(context).setLocale(Locale.fromSubtags(languageCode: 'nl')),
        ),
        TextButton(
          child: Text("Set locale to English"),
          onPressed: () => MyApp.of(context).setLocale(Locale.fromSubtags(languageCode: 'en')),
        ),
      ],
    );
  }
}

Feedback?

Let us know!