LanguageSwitcher

Introduction

The LanguageSwitcher widget provides an easy way to handle language switching in your Nylo Website projects. It automatically detects the languages available in your /lang directory and displays them to the user.

What does LanguageSwitcher do?

• Displays available languages from your /lang directory
• Switches the app language when the user selects one
• Persists the selected language across app restarts
• Automatically updates the UI when the language changes

Note: If your app isn't localized yet, learn how to do so in the Localization documentation before using this widget.

Dropdown Widget

The simplest way to use LanguageSwitcher is as a dropdown in your app bar:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Settings"),
      actions: [
        LanguageSwitcher(), // Add to the app bar
      ],
    ),
    body: Center(
      child: Text("Hello World".tr()),
    ),
  );
}

When the user taps the dropdown, they'll see a list of available languages. After selecting a language, the app will automatically switch and update the UI.

Bottom Sheet Modal

You can also display languages in a bottom sheet modal:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: MaterialButton(
        child: Text("Change Language"),
        onPressed: () {
          LanguageSwitcher.showBottomModal(context);
        },
      ),
    ),
  );
}

The bottom modal displays a list of languages with a checkmark next to the currently selected language.

Customizing the Modal Height

LanguageSwitcher.showBottomModal(
  context,
  height: 300, // Custom height
);

Custom Dropdown Builder

Customize how each language option appears in the dropdown:

LanguageSwitcher(
  dropdownBuilder: (Map<String, dynamic> language) {
    return Row(
      children: [
        Icon(Icons.language),
        SizedBox(width: 8),
        Text(language['name']), // e.g., "English"
        // language['locale'] contains the locale code, e.g., "en"
      ],
    );
  },
)

Handling Language Changes

LanguageSwitcher(
  onLanguageChange: (Map<String, dynamic> language) {
    print('Language changed to: ${language['name']}');
    // Perform additional actions when language changes
  },
)

Parameters

Static Methods

Get Current Language

Retrieve the currently selected language:

Map<String, dynamic>? lang = await LanguageSwitcher.currentLanguage();
// Returns: {"en": "English"} or null if not set

Store Language

Manually store a language preference:

await LanguageSwitcher.storeLanguage(
  object: {"fr": "French"},
);

Clear Language

Remove the stored language preference:

await LanguageSwitcher.clearLanguage();

Get Language Data

Get language information from a locale code:

Map<String, String>? langData = LanguageSwitcher.getLanguageData("en");
// Returns: {"en": "English"}

Map<String, String>? langData = LanguageSwitcher.getLanguageData("fr_CA");
// Returns: {"fr_CA": "French (Canada)"}

Get Language List

Get all available languages from the /lang directory:

List<Map<String, String>> languages = await LanguageSwitcher.getLanguageList();
// Returns: [{"en": "English"}, {"es": "Spanish"}, ...]

Show Bottom Modal

Display the language selection modal:

await LanguageSwitcher.showBottomModal(context);

// With custom height
await LanguageSwitcher.showBottomModal(context, height: 400);

Supported Locales

The LanguageSwitcher widget supports hundreds of locale codes with human-readable names. Some examples:

The full list includes regional variants for most languages.