localize.dev

Docs / Flutter

Flutter localization with ARB files, automated

Localize a Flutter app: Text() and hintText-style strings become AppLocalizations lookups with ARB files, ICU plurals and placeholder metadata, and gen-l10n is set up.

How it works

Text('…') and arguments like hintText:, labelText: and tooltip: become AppLocalizations.of(context)!.key, with method arguments for placeholders.

const is dropped only from widgets that now hold a lookup; strings without a BuildContext in scope are reported, not changed.

Before and after

The engine’s real output for this file. In a real run, the hosted model names the keys from context.

lib/screens/cart_screen.dart · before
import 'package:flutter/material.dart';

class CartScreen extends StatelessWidget {
  const CartScreen({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      const Text('Your cart'),
      Text('Welcome back, $name!'),
    ]);
  }
}
lib/screens/cart_screen.dart · after
import 'package:flutter/material.dart';

class CartScreen extends StatelessWidget {
  const CartScreen({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(AppLocalizations.of(context)!.cartScreenYourCart),
      Text(AppLocalizations.of(context)!.cartScreenWelcomeBack(name)),
    ]);
  }
}
lib/l10n/app_en.arb
{
  "cartScreenYourCart": "Your cart",
  "cartScreenWelcomeBack": "Welcome back, {name}!"
}

What the setup adds

The first run sets up flutter_localizations and gen-l10n if the project doesn’t have it yet:

  • flutter_localizations, intl and generate: true in pubspec.yaml
  • l10n.yaml and lib/l10n/app_<locale>.arb
  • MaterialApp delegates and supported locales, and the iOS language list

Run it

The CLI needs Node.js 22 or later, nothing else: npx runs it without adding a package.json to the project. No Node on your machine? The GitHub Action below runs it for you.

npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Or add the GitHub Action and get a pull request on every push. Try it on your own code first in the playground.