For LIXIL APP Documentation, the recommended approach is to use Flutter's built-in localization system with flutter_localizations, intl, and ARB files. This is the official and scalable way to support multiple languages such as English and Arabic. (Flutter Docs)

1. Add Dependencies

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0

flutter:
  generate: true

Flutter's localization system relies on flutter_localizations and intl packages. (Flutter Docs)

2. Create Localization Configuration

Create l10n.yaml in the project root:

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
output-class: AppLocalizations

3. Create Translation Files

lib/l10n/app_en.arb

{
"@@locale": "en",
  "syncingData": "Syncing Data...",
  "login": "Login",
  "home": "Home",
  "analytics": "Analytics",
  "settings": "Settings",
  "mobileNumber": "Mobile Number",
  "sendOTP": "Send OTP",
  "otp_verification": "OTP Verification",
  "otp_send_tag": "We'll send a one-time OTP to this number."
}

lib/l10n/app_ar.arb

{
  "@@locale": "ar",
  "syncingData": "جاري مزامنة البيانات...",
  "login": "تسجيل الدخول",
  "home": "الرئيسية",
  "analytics": "التحليلات",
  "settings": "إعدادات",
  "mobileNumber": "رقم الهاتف المحمول",
  "sendOTP": "أرسل كلمة مرور لمرة واحدة",
  "otp_verification": "التحقق من OTP",
  "otp_send_tag": "سنرسل رمز التحقق لمرة واحدة إلى هذا الرقم.",
}

ARB files are the recommended way to manage translations in Flutter applications. (Flutter Docs)

4. Configure MaterialApp

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final locale = ref.watch(localeProvider);

  void changeLanguage(String code) {
    setState(() {
      locale = Locale(code);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: locale,
      debugShowCheckedModeBanner: false,

      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],

      supportedLocales: const [
        Locale('en'),
        Locale('ar'),
      ],

      home: HomePage(
        onLanguageChanged: changeLanguage,
      ),
    );
  }
}

Flutter automatically rebuilds localized widgets when the locale changes. (Flutter Docs)

5. Use Localized Strings

final lang = AppLocalizations.of(context)!;

1. Text(AppLocalizations.of(context)!.otp_verification,
                        style: Theme.of(context)
                            .textTheme
                            .headlineMedium!
                            .copyWith(fontWeight: FontWeight.bold),
                      );
2. Text(AppLocalizations.of(context)!.otp_send_tag,style: Theme.of(context).textTheme.labelMedium!);

3. Text(AppLocalizations.of(context)!.mobileNumber);

6. Language Switcher

FloatingActionButton.extended(
          backgroundColor: primary,
          onPressed: () {
            final language = isEnglish ? 'en' : 'ar';
                     ref.read(localeProvider.notifier).changeLanguage(language);

            setState(() {
              isEnglish = !isEnglish;
            });
          },
          icon: const Icon(
            Icons.language,
            color: whiteColor,
          ),
          label: Text(
            AppLocalizations.of(context)!.change_language,
            style: const TextStyle(color: whiteColor),
          ),
        ),

7. Support RTL for Arabic

Flutter automatically handles Right-to-Left layouts for Arabic when the locale is set to ar. (FlutterLocalisation)

Example:

Directionality(
  textDirection: TextDirection.rtl,
  child: Text(lang.welcome),
)

Usually this is applied automatically by MaterialApp.

Suggested Folder Structure

lib/
 ├── l10n/
 │    ├── app_en.arb
 │    └── app_ar.arb
 ├── screens/
 │    ├── sendOtp.dart
 │    ├── verifyOtp.dart
 │    └── settings_page.dart
 ├── localization/
 │    └── language_controller.dart
 └── main.dart

Example Usage in LIXIL App Documentation

For production, it is also recommended to persist the selected language using SharedPreferences so the user's preference remains after restarting the app. (Reddit)

This setup is ideal for a LIXIL App Documentation because it supports:

• ✅ English and Arabic

• ✅ RTL layout for Arabic

• ✅ Dynamic language switching

• ✅ Scalable translations using ARB files

• ✅ Easy addition of future languages (Japanese, Thai, etc.)