Flutter Localization Architecture (React i18next Backend Equivalent)

Help General
1

Flutter Localization Architecture (React i18next Backend Equivalent)

I’m working on a Flutter application and I’m looking for the best production-ready localization architecture.

Current React Implementation

In my React application, I use i18next with a backend.

Features:

  • Translation files are fetched from a backend API.

  • Translations are grouped by namespace.

  • Components load only the namespace they need.

Example:

const { t } = useTranslation("dashboard");

<Text>{t("title")}</Text>

This allows:

  • Lazy loading of translations.

  • Namespace separation.

  • Dynamic language switching.

  • Updating translations from the backend without rebuilding the application.

Flutter Requirement

I’d like to implement the same architecture in Flutter.

My expected usage would be something similar to:

context.tr("dashboard.title");

or

LocalizationService.of(context).translate(
  namespace: "dashboard",
  key: "title",
);

Requirements:

  • Fetch translations from a backend/API instead of bundling JSON files.

  • Support namespaces/modules.

  • Cache downloaded translations locally.

  • Dynamic language switching at runtime.

  • Easy integration with flutter_bloc.

  • Production-ready and scalable.

My Questions

  1. What is the recommended approach for implementing backend-driven localization in Flutter?

  2. Is there any package that supports namespace-based translations similar to React i18next?

  3. Should I build a custom localization layer using LocalizationsDelegate, or is there a better architecture?

  4. How do large Flutter applications usually organize remote translations?

  5. Has anyone implemented an architecture similar to React’s useTranslation(namespace) in Flutter?

Any architecture suggestions, open-source examples, or production experiences would be greatly appreciated.