Internationalization

WebF lets you reuse your existing translation pipeline. Deliver a single bundle, detect the current locale from Flutter, and hydrate your UI with locale-specific copy.

Locale sources

Flutter host — Pass the locale from Dart to WebF when you create the runtime:


final webf = WebF(
  initialUrl: 'app/dist/index.html',
  initialData: {'locale': Localizations.localeOf(context).toLanguageTag()},
);

Inside JavaScript you can read window.__INITIAL_DATA__.locale and select the proper dictionary.

In-app switcher — Use your existing React/Vue i18n libraries. When the user selects a new locale, call webfBridge.invoke('setLocale', nextLocale) so native Flutter widgets (navigation, dialogs) stay in sync.

Managing strings

Organize translations in /src/i18n/<locale>.ts and export typed helpers.
Keep keys identical across locales to enable compile-time checks.
For WebF-specific strings, share a translations.json file and consume it from both Flutter and JavaScript via the same schema.


import translations from '../i18n/en'
 
type Keys = keyof typeof translations
 
export function t(key: Keys, vars: Record<string, string> = {}) {
  return translations[key].replace(/{{(\w+)}}/g, (_, name) => vars[name] ?? '')
}

Dates, numbers, currencies

WebF ships the standard Intl.* APIs, so you can format values exactly as you would in a browser:


const price = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD',
}).format(amount)

For consistency with Flutter, serialize the formatter options in Dart and pass them to WebF through the bridge so both runtimes display identical values.

Content negotiation

When your bundle calls backend APIs, include the Accept-Language header so the server can return localized payloads:


await fetch('/api/articles', {
  headers: {
    'Accept-Language': locale,
  },
})

Testing checklist

Validate RTL layouts using WebF Go’s language toggle.
Snapshot test your critical flows with Playwright using multiple locales.
Verify that switching locales updates both WebF surfaces and Flutter navigation chrome.