LanguageSwitcher

Einleitung

Das LanguageSwitcher-Widget bietet eine einfache Möglichkeit, den Sprachwechsel in Ihren Nylo Website-Projekten zu handhaben. Es erkennt automatisch die verfügbaren Sprachen in Ihrem /lang-Verzeichnis und zeigt sie dem Benutzer an.

Was macht LanguageSwitcher?

• Zeigt verfügbare Sprachen aus Ihrem /lang-Verzeichnis an
• Wechselt die App-Sprache, wenn der Benutzer eine auswählt
• Speichert die ausgewählte Sprache über App-Neustarts hinweg
• Aktualisiert automatisch die UI, wenn die Sprache gewechselt wird

Hinweis: Wenn Ihre App noch nicht lokalisiert ist, erfahren Sie in der Lokalisierung-Dokumentation, wie Sie dies tun können, bevor Sie dieses Widget verwenden.

Dropdown-Widget

Die einfachste Art, LanguageSwitcher zu verwenden, ist als Dropdown in Ihrer App-Leiste:

@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()),
    ),
  );
}

Wenn der Benutzer auf das Dropdown tippt, sieht er eine Liste der verfügbaren Sprachen. Nach Auswahl einer Sprache wechselt die App automatisch und aktualisiert die UI.

Bottom Sheet Modal

Sie können Sprachen auch in einem Bottom Sheet Modal anzeigen:

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

Das Bottom Modal zeigt eine Liste von Sprachen mit einem Häkchen neben der aktuell ausgewählten Sprache an.

Modal-Höhe anpassen

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

Benutzerdefinierter Dropdown-Builder

Passen Sie an, wie jede Sprachoption im Dropdown angezeigt wird:

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"
      ],
    );
  },
)

Sprachwechsel behandeln

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

Parameter

Statische Methoden

Aktuelle Sprache abrufen

Rufen Sie die aktuell ausgewählte Sprache ab:

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

Sprache speichern

Spracheinstellung manuell speichern:

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

Sprache löschen

Gespeicherte Spracheinstellung entfernen:

await LanguageSwitcher.clearLanguage();

Sprachdaten abrufen

Sprachinformationen aus einem Locale-Code abrufen:

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

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

Sprachliste abrufen

Alle verfügbaren Sprachen aus dem /lang-Verzeichnis abrufen:

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

Bottom Modal anzeigen

Das Sprachauswahl-Modal anzeigen:

await LanguageSwitcher.showBottomModal(context);

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

Unterstützte Locales

Das LanguageSwitcher-Widget unterstützt Hunderte von Locale-Codes mit lesbaren Namen. Einige Beispiele:

Die vollständige Liste umfasst regionale Varianten für die meisten Sprachen.