PluginBench
Skill
Pass
Audit score 90

flutter-setup-localization

flutter/agent-plugins

Initialize Flutter localization with flutter_localizations, intl, and ARB file configuration.

What is flutter-setup-localization?

Sets up internationalization (i18n) support in Flutter projects by adding required dependencies, enabling code generation, and creating the l10n.yaml configuration file. Use this when starting localization for a new Flutter app.

  • Adds flutter_localizations and intl packages to pubspec.yaml
  • Enables the generate flag for automated localization code generation
  • Creates l10n.yaml configuration file with ARB directory and output settings
  • Configures MaterialApp/CupertinoApp with localization delegates and supported locales
  • Supports placeholders, plurals, and conditional selects in localized strings
  • Generates type-safe AppLocalizations class for accessing translated content

How to install flutter-setup-localization

npx skills add https://github.com/flutter/agent-plugins --skill flutter-setup-localization
Prerequisites
  • Flutter SDK installed and configured
  • Existing Flutter project with pubspec.yaml
  • Basic understanding of YAML syntax
Claude Code
Cursor
Windsurf
Cline

How to use flutter-setup-localization

  1. 1.Run 'flutter pub add flutter_localizations --sdk=flutter' to add the localizations package
  2. 2.Run 'flutter pub add intl:any' to add the intl package
  3. 3.Open pubspec.yaml and add 'generate: true' under the flutter section
  4. 4.Create l10n.yaml in the project root with arb-dir, template-arb-file, and output-localization-file settings
  5. 5.Create lib/l10n directory and add app_en.arb with base English strings and descriptions
  6. 6.Create additional .arb files for other locales (e.g., app_es.arb for Spanish)
  7. 7.Run 'flutter pub get' to generate the AppLocalizations class
  8. 8.Import AppLocalizations and localization delegates in main.dart

Use cases

Good for
  • Initialize a new Flutter project with multi-language support from the start
  • Add English as base language with Spanish, French, or other locale translations
  • Create dynamic localized strings with parameters like user names or item counts
  • Handle plural forms and gender-based conditional text in different languages
  • Generate localization code automatically when ARB files are modified
Who it's for
  • Flutter developers building multi-language applications
  • Teams requiring internationalization from project inception
  • Developers managing localized content across multiple locales
  • App developers targeting international markets

flutter-setup-localization FAQ

What is the difference between flutter_localizations and intl?

flutter_localizations provides Material and Cupertino localized widgets and delegates. intl is the underlying package that handles message formatting, plurals, and date/number formatting for localized content.

How do I add a new language to my Flutter app?

Create a new .arb file in lib/l10n (e.g., app_fr.arb for French), add the translated strings, add the locale to supportedLocales in MaterialApp, and run 'flutter pub get' to regenerate the AppLocalizations class.

What is an ARB file and why use it?

ARB (Application Resource Bundle) is a JSON format for storing localized strings with metadata. It provides a structured, human-readable way to manage translations and supports advanced features like placeholders, plurals, and descriptions.

Do I need to manually write the AppLocalizations class?

No. The AppLocalizations class is automatically generated from your ARB files when you run 'flutter pub get' with generate: true enabled in pubspec.yaml.

Can I use placeholders and plurals in localized strings?

Yes. Define placeholders with types in the @key metadata object, and use ICU message syntax like '{count, plural, =0{no items} other{{count} items}}' for plurals and '{gender, select, male{he} female{she} other{they}}' for conditionals.

Full instructions (SKILL.md)

Source of truth, from flutter/agent-plugins.


name: flutter-setup-localization description: Add flutter_localizations and intl dependencies, enable "generate true" in pubspec.yaml, and create an l10n.yaml configuration file. Use when initializing localization support for a new Flutter project. metadata: model: models/gemini-3.1-pro-preview last_modified: Tue, 21 Apr 2026 21:27:35 GMT

Internationalizing Flutter Applications

Contents

Core Concepts

Flutter handles internationalization (i18n) and localization (l10n) via the flutter_localizations and intl packages. The standard approach uses App Resource Bundle (.arb) files to define localized strings, which are then compiled into a generated AppLocalizations class for type-safe access within the widget tree.

Setup Workflow

Copy and track this checklist when initializing internationalization in a Flutter project:

  • Task Progress
    • 1. Add dependencies to pubspec.yaml.
    • 2. Enable the generate flag.
    • 3. Create the l10n.yaml configuration file.
    • 4. Configure MaterialApp or CupertinoApp.

1. Add Dependencies

Add the required localization packages to the project. Execute the following commands in the terminal:

flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:any

Verify your pubspec.yaml includes the following under dependencies:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

2. Enable Code Generation

Open pubspec.yaml and enable the generate flag within the flutter section to automate localization tasks:

flutter:
  generate: true

3. Create Configuration File

Create a new file named l10n.yaml in the root directory of the Flutter project. Define the input directory, template file, and output file:

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: true

4. Configure the App Entry Point

Import the generated localizations and the flutter_localizations library in your main.dart. Inject the delegates and supported locales into your MaterialApp or CupertinoApp.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Adjust path if synthetic-package is false

// ... inside build method
return MaterialApp(
  localizationsDelegates: const [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en'), // English
    Locale('es'), // Spanish
  ],
  home: const MyHomePage(),
);

Implementation Workflow

Follow this workflow when adding or modifying localized content.

1. Define ARB Files

  • If creating NEW content: Add the base string to the template file (lib/l10n/app_en.arb). Include a description for context.
  • If EDITING existing content: Locate the key in all supported .arb files and update the values.
{
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}

Create corresponding files for other locales (e.g., app_es.arb):

{
  "helloWorld": "¡Hola Mundo!"
}

2. Generate Localization Classes

Run the following command to trigger code generation:

flutter pub get

Feedback Loop: Run validator -> review terminal output for ARB syntax errors -> fix missing commas or mismatched placeholders -> re-run flutter pub get.

3. Consume Localized Strings

Access the localized strings in your widget tree using AppLocalizations.of(context). Ensure the widget calling this is a descendant of MaterialApp.

Text(AppLocalizations.of(context)!.helloWorld)

Advanced Formatting

Use placeholders for dynamic data, plurals, and conditional selects.

Placeholders

Define parameters within curly braces and specify their type in the metadata object.

"hello": "Hello {userName}",
"@hello": {
  "description": "A message with a single parameter",
  "placeholders": {
    "userName": {
      "type": "String",
      "example": "Bob"
    }
  }
}

Plurals

Use the plural syntax to handle quantity-based string variations. The other case is mandatory.

"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
"@nWombats": {
  "description": "A plural message",
  "placeholders": {
    "count": {
      "type": "num",
      "format": "compact"
    }
  }
}

Selects

Use the select syntax for conditional strings, such as gendered text.

"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
  "description": "A gendered message",
  "placeholders": {
    "gender": {
      "type": "String"
    }
  }
}

Examples

Complete l10n.yaml

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: true
use-escaping: true

Complete Widget Implementation

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

class GreetingWidget extends StatelessWidget {
  final String userName;
  final int notificationCount;

  const GreetingWidget({
    super.key, 
    required this.userName, 
    required this.notificationCount,
  });

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;

    return Column(
      children: [
        Text(l10n.hello(userName)),
        Text(l10n.nWombats(notificationCount)),
      ],
    );
  }
}