Localization

Wiredash supports several languages out of the box (see the list of supported translation files here). By default, Wiredash will be shown in the device language provided by the operating system. In case we don't support your locale we fall back to en-US.

INFO

Learn localizing Wiredash from the full example in the Wiredash repository

Change SDK locale

Overriding the system locale can be achieved with the locale parameter. If you want to override the default locale just pass locale parameter as follows. If the locale is not supported, English will be used by default.

return Wiredash(
  // ...
  options: WiredashOptionsData(
    /// You can set your own locale to override device default (`window.locale` by default)
    locale: const Locale('de', 'DE'),
  ),
);

This might be useful when your app supports a locale switcher that is independent of the operating system.

Access locale from MaterialApp

When you use the official package:flutter_localizations you might run into the problem that you can't access your localizations or current locale above MaterialApp. That's because the MaterialApp creates the Localization widget internally, providing it only to its children.

While we recommend placing the Wiredash widget above MaterialApp you can swap those using builder from MaterialApp. This places Wiredash above the Navigator.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: MyHomePage(),
    supportedLocales: [Locale('en'), Locale('de'), Locale('pl')],
    localizationsDelegates: [
      ...AppLocalizations.localizationsDelegates,
    ],
    builder: (context, child) {
      return Wiredash(
        // ...
        options: WiredashOptionsData(
          locale: Localizations.localeOf(context),
        ),
        feedbackOptions: WiredashFeedbackOptions(
          labels: [
            Label(
              id: 'lbl-a',
              title: AppLocalizations.of(context)!.labelA,
            ),
            Label(
              id: 'lbl-b',
              title: AppLocalizations.of(context)!.labelA,
            ),
          ],
        ),
        child: child!,
      );
    },
  );
}

You can now access your apps localizations AppLocalizations.of(context) and the locale selected by MaterialApp Localizations.localeOf(context). Localizing your labels is now straightforward.

Use a 3rd party localization SDK

We recommend using a 3rd party localization package, like package:easy_localization to manage your localizations. It makes accessing the localization strings usually easier.

Here we use the .tr() function to convert the String-based id "wiredash.label_one" into a localized String.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:easy_localization/easy_localization.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('de', 'DE')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: MyApp()
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wiredash(
      // ...
      options: WiredashOptionsData(
        locale: context.locale,
      ),
      feedbackOptions: WiredashFeedbackOptions(
        labels: [
          Label(
            id: "label_id_1",
            title: "wiredash.label_one".tr(),
          ),
          Label(
            id: "label_id_2",
            title: "wiredash.label_two".tr(),
          ),
        ],
      ),
      child: MaterialApp(
        localizationsDelegates: context.localizationDelegates,
        supportedLocales: context.supportedLocales,
        locale: context.locale,
        home: MyHomePage()
      ),
    );
  }
}

Custom strings

You can also provide custom translations to better match the communication style you want to have with your users.

INFO

Checkout the full localization example wiredash-sdk/examples/localization

Let's say you want to edit the title of the feedback flow. First, create your own LocalizationsDelegate and register it with Wiredash.

return Wiredash(
  // ...
  options: WiredashOptionsData(
    // Add a custom localizationDelegate
    localizationDelegate: const CustomWiredashTranslationsDelegate(),
  ),

class CustomWiredashTranslationsDelegate extends LocalizationsDelegate<WiredashLocalizations> {
  const CustomWiredashTranslationsDelegate();

  @override
  bool isSupported(Locale locale) {
    /// You have to define all languages that should be overridden
    return ['en'].contains(locale.languageCode);
  }

  @override
  Future<WiredashLocalizations> load(Locale locale) {
    switch (locale.languageCode) {
      case 'en':
        // Replace some text to better address your users
        return SynchronousFuture(_EnOverrides());
      default:
        throw "Unsupported locale $locale";
    }
  }

  @override
  bool shouldReload(CustomWiredashTranslationsDelegate old) => false;
}

Second, override the WiredashLocalizations of the locale you want to change. Here, WiredashLocalizationsEn overrides the English locale. You can override as many terms as you want.

class _EnOverrides extends WiredashLocalizationsEn {
  @override
  String get feedbackStep1MessageTitle => 'Do you have a problem?';

  @override
  String get feedbackStep1MessageDescription =>
      "Don't hesitate to send us your honest feedback. Crashes, bugs, and other issues are welcome.";

  // Override more if you want ...
}

INFO

Use extends instead of implements so that your code doesn't break when we add new terms.

Add support for new languages

Contribute to Wiredash

To contribute your locale to Wiredash you have to create an .arb file with all strings of your locale. Download the default locale (en) and adjust it for the new locale you want to add.

Either create a Pull Request with your new .arb file or shoot us an email at hey@wiredash.com. We will make sure to integrate it as soon as possible and release a new version, including your locale.

Add your locale

Adding a new locale is very similar to overriding an existing locale.

First, create your LocalizationsDelegate for the locale you want to add and register it with Wiredash. Here we add Klingon.

return Wiredash(
  // ...
  options: WiredashOptionsData(
    // Add a custom localizationDelegate
    localizationDelegate: const CustomWiredashTranslationsDelegate(),
  ),

class CustomWiredashTranslationsDelegate extends LocalizationsDelegate<WiredashLocalizations> {
  const CustomWiredashTranslationsDelegate();

  @override
  bool isSupported(Locale locale) {
    /// You have to define all languages you want your delegate to support
    /// Klingon == tlh
    return ['tlh'].contains(locale.languageCode);
  }

  @override
  Future<WiredashLocalizations> load(Locale locale) {
    switch (locale.languageCode) {
      case 'tlh':
        // Replace some text to better address your users
        return SynchronousFuture(WiredashLocalizationsKlingon());
      default:
        throw "Unsupported locale $locale";
    }
  }

  @override
  bool shouldReload(CustomWiredashTranslationsDelegate old) => false;
}

Then add the WiredashLocalizations for the Klingon locale. Use extends WiredashLocalizationsEn to fall back to English in case Wiredash adds new terms.

class WiredashLocalizationsKlingon extends WiredashLocalizationsEn {
  WiredashLocalizationsKlingon() : super('tlh');

  @override
  String get feedbackStep1MessageTitle => "juplIj Dapabchugh bIQongHa'";

  @override
  String get feedbackStep1MessageDescription => "joHpu'bogh QupwI'pu''e'";

  @override
  String get feedbackStep1MessageHint => "chaq vItlhob.";

  //...
}

Localize labels

Localizing labels can be accomplished by placing Wiredash below MaterialApp or using a 3rd party localization package. In case those options aren't working for you, you can add the labels directly when calling Wiredash.of(context).show(), where you have access to a valid BuildContext.

Wiredash.of(context).show(
  inheritMaterialTheme: true,
  feedbackOptions: WiredashFeedbackOptions(
    email: EmailPrompt.optional,
    screenshot: ScreenshotPrompt.optional,
    labels: [
      Label(
        id: 'label-a',
        title: AppLocalizations.of(context)?.labelA ??
            "Fallback for Label A",
      ),
      Label(
        id: 'label-b',
        title: AppLocalizations.of(context)?.labelB ??
            "Fallback for Label B",
      ),
    ],
  ),
);