Sobes.tech
Middle

How to add localization to a Flutter application?

sobes.tech AI

Answer from AI

Adding localization to a Flutter app can be done using the flutter_localizations package.

  1. Add the flutter_localizations dependency in your pubspec.yaml:
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add the localization package
    sdk: flutter # Specify that this is the Flutter SDK

  # Other dependencies of your project

Run flutter pub get.

  1. Configure localization in MaterialApp or CupertinoApp:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

// Assume you have a class for string delegation, e.g., LocalizationDelegate
import 'package:your_app/l10n/localization_delegate.dart'; 

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Supported locales
      supportedLocales: const [
        Locale('en', ''), // English
        Locale('ru', ''), // Russian
        // ... other locales
      ],

      // Delegates providing localized values
      localizationsDelegates: const [
        // Our string delegate
        AppLocalizationDelegate(), 
        // Delegates for Material and Cupertino widgets
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        // Delegate for text direction (LTR/RTL)
        GlobalWidgetsLocalizations.delegate,
      ],

      // Optional: handle locale changes (e.g., save user preference)
      localeResolutionCallback: (locale, supportedLocales) {
        // Logic to select locale based on user preferences or system locale
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale?.languageCode) {
            return supportedLocale;
          }
        }
        // If preferred locale isn't supported, return the first supported
        return supportedLocales.first;
      },

      home: MyHomePage(), // Your main screen
    );
  }
}
  1. Create localized string files, usually in ARB (*.arb) format. Example lib/l10n/app_en.arb:
{
  "appTitle": "My App",
  "helloWorld": "Hello World!"
}

Example lib/l10n/app_ru.arb:

{
  "appTitle": "Мое приложение",
  "helloWorld": "Привет мир!"
}
}
  1. Generate access classes for localized strings. Add a l10n.yaml file in your project root:
arb-dir: lib/l10n # Folder with ARB files
template-arb-file: app_en.arb # ARB template file for generation
output-localization-file: app_localizations.dart # Generated file name

Run flutter gen-l10n. It will generate the AppLocalizations class (or another name specified in l10n.yaml) and the delegate AppLocalizationDelegate in .dart_tool/flutter_gen/gen_l10n.

  1. Use the generated class to access strings in your app:
import 'package:flutter/material.dart';
// Import the generated localization class
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Get the localization instance
    final localizations = AppLocalizations.of(context)!; 

    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.appTitle), // Use localized string
      ),
      body: Center(
        child: Text(localizations.helloWorld), // Use localized string
      ),
    );
  }
}
How to add localization to a Flutter application… - sobes.tech