Integrate App-Wide Localization (Multi-Language Support)

[MasterAffan]

Description:
Enable multi-language support throughout the OptiFit app to make it accessible to a wider audience. The app should initially support English and Hindi, with a scalable structure for adding more languages later. The localization system should apply across all screens — including login, onboarding, dashboard, chat, and settings — with instant language switching.

Tasks:

• Setup Localization Framework

  • Add flutter_localizations and intl packages to the project.

  • Enable localization support in MaterialApp by adding:

    localizationsDelegates: [
      AppLocalizations.delegate,
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    supportedLocales: [
      Locale('en', ''),
      Locale('hi', ''),
    ],

  • Create an l10n directory to store language resource files.

• Extract Strings for Translation

  • Identify and remove all hardcoded text across the app (buttons, labels, messages, error texts).

  • Create app_en.arb and app_hi.arb files in the l10n folder.

  • Add key-value pairs for each string in English and their Hindi translations. Example:

    {
      "welcomeMessage": "Welcome to OptiFit",
      "@welcomeMessage": {
        "description": "Greeting message shown on the home screen"
      },
      "welcomeMessage_hi": "OptiFit में आपका स्वागत है"
    }

  • Keep translation keys consistent and descriptive (e.g., loginButton, homeTitle, workoutSummary).

• Implement Language Selection

  • Add a language selector in the settings screen with a dropdown or segmented control for “English” and “हिन्दी”.
  • When the user selects a language, update the app’s locale dynamically using a Provider or Riverpod state.
  • Save the selected locale in shared_preferences to persist preference across app restarts.

• Adjust Layouts and UI Elements

  • Ensure text widgets expand properly for longer Hindi strings (avoid overflow).
  • Verify text direction and alignment remain natural (left-to-right for both English and Hindi).
  • Check that button labels, navigation titles, and dialog boxes resize correctly.

• Testing and Validation

  • Test on multiple devices and screen sizes.
  • Verify that changing language updates all visible text instantly without restarting the app.
  • Confirm that no untranslated text remains in either language.
  • Ensure onboarding, login, and chat modules reflect the correct language dynamically.
  • Collect screenshots showing both English and Hindi UI for documentation and review.

• Documentation

  • Update the README with localization setup steps and instructions for adding new languages.
  • Add a developer note explaining the .arb workflow and where to place new translations.

Acceptance Criteria:

• App supports English and Hindi fully.
• Language can be switched in-app via settings without restarting.
• Language preference persists across app restarts.
• No hardcoded or untranslated text remains.
• Layouts adapt correctly for longer translated strings.
• Screenshots attached showing key screens in both languages.
• README updated with localization instructions.

[AyushBurde]

hey hii!! I went out through your project it seems interesting , could you pls assign this issue to me would love to contribute to this

[MasterAffan]

@AyushBurde sure that's great would love to hear from you soon
Assigned this issue to you