Community编程与开发github.com

flutter/flutter-localizing-apps

配置 Flutter 应用以支持多种语言和地区。在准备面向国际市场和多语言用户的应用时使用。

flutter-localizing-apps 是什么?

该技能(`flutter/flutter-localizing-apps`)用于配置 Flutter 应用,使其支持多语言和区域适配。其核心价值在于帮助开发者为国际市场准备应用,确保不同语言和地区的用户都能获得本地化体验。技能支持所有 Flutter 平台(iOS、Android、Web 等),通过集成 `flutter_localizations` 包和 `intl` 包,组件化和动态化地加载本地化资源。工作流程包括在 `pubspec.yaml` 中声明依赖、启用本地化委托、生成 ARB 文件(如 `app_zh.arb` 或 `app_en.arb`),并在运行时根据系统区域设置自动切换语言。该技能还指导如何处理复数形式、日期格式和 RTL 布局等本地化难点,从而实现完整的国际化和本地化(i18n/l10n)解决方案。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-localizing-apps

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

flutter-localizing-apps 是做什么的?

配置 Flutter 应用以支持多种语言和地区。在准备面向国际市场和多语言用户的应用时使用。

概述

此技能指导如何为 Flutter 应用添加多语言和区域支持。它使用 flutter_localizations 和 intl 包来实现国际化(i18n)和本地化(l10n)。

使用方法

  1. 添加依赖:在 pubspec.yaml 中添加 flutter_localizations 和 intl 依赖。

    dependencies:
      flutter:
        sdk: flutter
      flutter_localizations:
        sdk: flutter
      intl: ^0.18.0
    
  2. 配置本地化委托:在 MaterialApp 中设置 localizationsDelegates 和 supportedLocales。

    import 'package:flutter_localizations/flutter_localizations.dart';
    import 'package:intl/intl.dart';
    
    MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', 'US'), // 英语
        Locale('zh', 'CN'), // 中文
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        // 自定义区域解析逻辑
      },
      home: MyHomePage(),
    );
    
  3. 创建 ARB 文件:在 lib/l10n 目录下创建 ARB 文件(例如 app_en.arb、app_zh.arb)。

    // app_en.arb
    {
      "@@locale": "en",
      "appTitle": "My App"
    }
    
    // app_zh.arb
    {
      "@@locale": "zh",
      "appTitle": "我的应用"
    }
    
  4. 生成本地化类:运行以下命令生成 dart 类。

    flutter gen-l10n
    
  5. 使用本地化字符串:在代码中通过生成的 AppLocalizations 类引用。

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

高级用法

  • 复数形式:在 ARB 文件中定义复数字符串。

    {
      "@_count": "1",
      "itemsCount": "{count} item(s)"
    }
    
  • 日期格式:使用 DateFormat 类按区域格式化日期。

    DateFormat.yMMMMd().format(DateTime.now())
    
  • RTL 支持:Flutter 自动处理 RTL 布局,无需额外配置。

注意事项

  • 确保在 pubspec.yaml 中指定最低 Flutter 版本以支持本地化特性。
  • 定期更新 ARB 文件以保持翻译同步。
  • 测试不同区域设置下的布局和字符串显示。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

flutter/flutter-accessibility

Configure your Flutter app to support assistive technologies like Screen Readers

flutter/flutter-accessibility-audit

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.

flutter/flutter-adding-home-screen-widgets

Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.

flutter/flutter-add-integration-test

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.

flutter/flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

flutter/flutter-add-widget-test

Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.

flutter/flutter-animating-apps

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.

flutter/flutter-animation

Add animated effects to your Flutter app

flutter/flutter-apply-architecture-best-practices

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-app-size

Measure and reduce the size of the Flutter app bundle, APK, or IPA

flutter/flutter-architecting-apps

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-architecture

Use the Flutter team's recommended app architecture

flutter/flutter-building-forms

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

flutter/flutter-building-layouts

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

flutter/flutter-building-plugins

Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality.

flutter/flutter-build-responsive-layout

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/flutter-caching

Cache data in a Flutter app

flutter/flutter-caching-data

Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup.

flutter/flutter-concurrency

Execute long-running tasks in a background thread in Flutter

flutter/flutter-databases

Work with databases in a Flutter app

相关技能