flutter-setup-localization

Name: flutter-setup-localization
Author: flutter

911installs159forks

How to install flutter-setup-localization?

flutter/agent-plugins/flutter-setup-localization

$npx -y skills add flutter/agent-plugins --skill flutter-setup-localization

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Internationalizing Flutter Applications
2
3	## Contents
4	- [Core Concepts](#core-concepts)
5	- [Setup Workflow](#setup-workflow)
6	- [Implementation Workflow](#implementation-workflow)
7	- [Advanced Formatting](#advanced-formatting)
8	- [Examples](#examples)
9
10	## Core Concepts
11	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.
12
13	## Setup Workflow
14
15	Copy and track this checklist when initializing internationalization in a Flutter project:
16
17	- [ ] Task Progress
18	- [ ] 1. Add dependencies to `pubspec.yaml`.
19	- [ ] 2. Enable the `generate` flag.
20	- [ ] 3. Create the `l10n.yaml` configuration file.
21	- [ ] 4. Configure `MaterialApp` or `CupertinoApp`.
22
23	### 1. Add Dependencies
24	Add the required localization packages to the project. Execute the following commands in the terminal:
25	```bash
26	flutter pub add flutter_localizations --sdk=flutter
27	flutter pub add intl:any
28	```
29
30	Verify your `pubspec.yaml` includes the following under `dependencies`:
31	```yaml
32	dependencies:
33	flutter:
34	sdk: flutter
35	flutter_localizations:
36	sdk: flutter
37	intl: any
38	```
39
40	### 2. Enable Code Generation
41	Open `pubspec.yaml` and enable the `generate` flag within the `flutter` section to automate localization tasks:
42	```yaml
43	flutter:
44	generate: true
45	```
46
47	### 3. Create Configuration File
48	Create a new file named `l10n.yaml` in the root directory of the Flutter project. Define the input directory, template file, and output file:
49	```yaml
50	arb-dir: lib/l10n
51	template-arb-file: app_en.arb
52	output-localization-file: app_localizations.dart
53	synthetic-package: true
54	```
55
56	### 4. Configure the App Entry Point
57	Import the generated localizations and the `flutter_localizations` library in your `main.dart`. Inject the delegates and supported locales into your `MaterialApp` or `CupertinoApp`.
58
59	```dart
60	import 'package:flutter_localizations/flutter_localizations.dart';
61	import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Adjust path if synthetic-package is false
62
63	// ... inside build method
64	return MaterialApp(
65	localizationsDelegates: const [
66	AppLocalizations.delegate,
67	GlobalMaterialLocalizations.delegate,
68	GlobalWidgetsLocalizations.delegate,
69	GlobalCupertinoLocalizations.delegate,
70	],
71	supportedLocales: const [
72	Locale('en'), // English
73	Locale('es'), // Spanish
74	],
75	home: const MyHomePage(),
76	);
77	```
78
79	## Implementation Workflow
80
81	Follow this workflow when adding or modifying localized content.
82
83	### 1. Define ARB Files
84	* If creating NEW content: Add the base string to the template file (`lib/l10n/app_en.arb`). Include a description for context.
85	* If EDITING existing content: Locate the key in all supported `.arb` files and update the values.
86
87	```json
88	{
89	"helloWorld": "Hello World!",
90	"@helloWorld": {
91	"description": "The conventional newborn programmer greeting"
92	}
93	}
94	```
95
96	Create corresponding files for other locales (e.g., `app_es.arb`):
97	```json
98	{
99	"helloWorld": "¡Hola Mundo!"
100	}
101	```
102
103	### 2. Generate Localization Classes
104	Run the following command to trigger code generation:
105	```bash
106	flutter pub get
107	```
108	Feedback Loop: Run validator -> review terminal output for ARB syntax errors -> fix missing commas or mismatched placeholders -> re-run `flutter pub get`.
109
110	### 3. Consume Localized Strings
111	Access the localized strings in your widget tree using `AppLocalizations.of(context)`. Ensure the widget calling this is a descendant of `MaterialApp`.
112
113	```dart
114	Text(AppLocalizations.of(context)!.helloWorld)
115	```
116
117	## Advanced Formatting
118
119	Use placeholders for dynamic data, plurals, and conditional selects.
120
121	### Placeholders
122	Define parameters within curly braces and specify their type in the metadata object.
123	```json
124	"hello": "Hello {userName}",
125	"@hello": {
126	"description": "A message with a single parameter",
127	"placeholders": {
128	"userName": {
129	"type": "String",
130	"example": "Bob"
131	}
132	}
133	}
134	```
135
136	### Plurals
137	Use the `plural` syntax to handle quantity-based string variations. The `other` case is mandatory.
138	```json
139	"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
140	"@nWombats": {
141	"description": "A plural message",
142	"placeholders": {
143	"count": {
144	"type": "num",
145	"format": "compact"
146	}
147	}
148	}
149	```
150
151	### Selects
152	Use the `select` syntax for conditional strings, such as gendered text.
153	```json
154	"pronoun": "{gender, select, male{he} female{she} other{they}}",
155	"@pronoun":

People who liked this also viewed

6 picks

Type

flutter-setup-localization

911installs159forks

View on GitHub

How to install flutter-setup-localization?

flutter/agent-plugins/flutter-setup-localization

$npx -y skills add flutter/agent-plugins --skill flutter-setup-localization

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Internationalizing Flutter Applications
2
3	## Contents
4	- [Core Concepts](#core-concepts)
5	- [Setup Workflow](#setup-workflow)
6	- [Implementation Workflow](#implementation-workflow)
7	- [Advanced Formatting](#advanced-formatting)
8	- [Examples](#examples)
9
10	## Core Concepts
11	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.
12
13	## Setup Workflow
14
15	Copy and track this checklist when initializing internationalization in a Flutter project:
16
17	- [ ] Task Progress
18	- [ ] 1. Add dependencies to `pubspec.yaml`.
19	- [ ] 2. Enable the `generate` flag.
20	- [ ] 3. Create the `l10n.yaml` configuration file.
21	- [ ] 4. Configure `MaterialApp` or `CupertinoApp`.
22
23	### 1. Add Dependencies
24	Add the required localization packages to the project. Execute the following commands in the terminal:
25	```bash
26	flutter pub add flutter_localizations --sdk=flutter
27	flutter pub add intl:any
28	```
29
30	Verify your `pubspec.yaml` includes the following under `dependencies`:
31	```yaml
32	dependencies:
33	flutter:
34	sdk: flutter
35	flutter_localizations:
36	sdk: flutter
37	intl: any
38	```
39
40	### 2. Enable Code Generation
41	Open `pubspec.yaml` and enable the `generate` flag within the `flutter` section to automate localization tasks:
42	```yaml
43	flutter:
44	generate: true
45	```
46
47	### 3. Create Configuration File
48	Create a new file named `l10n.yaml` in the root directory of the Flutter project. Define the input directory, template file, and output file:
49	```yaml
50	arb-dir: lib/l10n
51	template-arb-file: app_en.arb
52	output-localization-file: app_localizations.dart
53	synthetic-package: true
54	```
55
56	### 4. Configure the App Entry Point
57	Import the generated localizations and the `flutter_localizations` library in your `main.dart`. Inject the delegates and supported locales into your `MaterialApp` or `CupertinoApp`.
58
59	```dart
60	import 'package:flutter_localizations/flutter_localizations.dart';
61	import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Adjust path if synthetic-package is false
62
63	// ... inside build method
64	return MaterialApp(
65	localizationsDelegates: const [
66	AppLocalizations.delegate,
67	GlobalMaterialLocalizations.delegate,
68	GlobalWidgetsLocalizations.delegate,
69	GlobalCupertinoLocalizations.delegate,
70	],
71	supportedLocales: const [
72	Locale('en'), // English
73	Locale('es'), // Spanish
74	],
75	home: const MyHomePage(),
76	);
77	```
78
79	## Implementation Workflow
80
81	Follow this workflow when adding or modifying localized content.
82
83	### 1. Define ARB Files
84	* If creating NEW content: Add the base string to the template file (`lib/l10n/app_en.arb`). Include a description for context.
85	* If EDITING existing content: Locate the key in all supported `.arb` files and update the values.
86
87	```json
88	{
89	"helloWorld": "Hello World!",
90	"@helloWorld": {
91	"description": "The conventional newborn programmer greeting"
92	}
93	}
94	```
95
96	Create corresponding files for other locales (e.g., `app_es.arb`):
97	```json
98	{
99	"helloWorld": "¡Hola Mundo!"
100	}
101	```
102
103	### 2. Generate Localization Classes
104	Run the following command to trigger code generation:
105	```bash
106	flutter pub get
107	```
108	Feedback Loop: Run validator -> review terminal output for ARB syntax errors -> fix missing commas or mismatched placeholders -> re-run `flutter pub get`.
109
110	### 3. Consume Localized Strings
111	Access the localized strings in your widget tree using `AppLocalizations.of(context)`. Ensure the widget calling this is a descendant of `MaterialApp`.
112
113	```dart
114	Text(AppLocalizations.of(context)!.helloWorld)
115	```
116
117	## Advanced Formatting
118
119	Use placeholders for dynamic data, plurals, and conditional selects.
120
121	### Placeholders
122	Define parameters within curly braces and specify their type in the metadata object.
123	```json
124	"hello": "Hello {userName}",
125	"@hello": {
126	"description": "A message with a single parameter",
127	"placeholders": {
128	"userName": {
129	"type": "String",
130	"example": "Bob"
131	}
132	}
133	}
134	```
135
136	### Plurals
137	Use the `plural` syntax to handle quantity-based string variations. The `other` case is mandatory.
138	```json
139	"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
140	"@nWombats": {
141	"description": "A plural message",
142	"placeholders": {
143	"count": {
144	"type": "num",
145	"format": "compact"
146	}
147	}
148	}
149	```
150
151	### Selects
152	Use the `select` syntax for conditional strings, such as gendered text.
153	```json
154	"pronoun": "{gender, select, male{he} female{she} other{they}}",
155	"@pronoun":

People who liked this also viewed

6 picks

Type