尧图网站建设 
Flutter Stocks 演示应用实战构建安装、Material 组件与 gen_l10n 国际化全流程解析【免费下载链接】flutterFlutter makes it easy and fast to build beautiful apps for mobile and beyond项目地址: https://gitcode.com/GitHub_Trending/flutter41/flutterStocks 是 Flutter 仓库内置的演示应用demo app用于展示 Material Design 组件库及其他 Flutter 核心特性同时它也是dev/benchmarks目录下的滚动性能测试对象。读完本篇你将掌握 Stocks 应用的构建与安装方法、其入口路由与主题架构以及基于gen_l10n工具链的 ARB 文件国际化完整工作流——从.arb文案文件、l10n.yaml配置到生成StockStrings类并接入MaterialApp的每一步都能直接复用到自己的项目中。应用定位与仓库位置根据 README.mdStocks 的定位非常明确Demo app for the Material Design widgets and other features provided by Flutter即一个展示 Material 组件与 Flutter 特性的演示应用。此外README 还说明该应用已经完成了国际化just enough to show how its done作为gen_l10n工具的使用示例。需要留意的是README 中构建一节给出的路径cd $FLUTTER_ROOT/examples/stocks是该应用历史上所在的examples/目录在当前仓库中这个应用实际位于dev/benchmarks/test_apps/stocks它同时承担着基准测试benchmark测试对象的角色——目录下带有test_driver/scroll_perf_test.dart这类驱动测试详见文末测试与性能驱动一节。从源码结构看应用主体由以下 Dart 文件组成位于 lib/ 目录main.dart应用入口负责主题、路由与本地化接入stock_home.dart主页包含 TabBar、搜索、Drawer、底部弹层等 Material 组件的综合运用stock_settings.dart设置页提供一系列渲染调试开关stock_list.dart、stock_row.dart股票列表与行组件stock_data.dart模拟数据源i18n/国际化资源与生成文件ARB 文件、StockStrings类及说明文档 regenerate.md。平台侧则包含标准的 Androidandroid/带 Gradle lockfile与 iOSios/含 Xcode 工程与 AppIcon 资源集工程目录。构建与安装README 给出的构建流程非常简单前提条件是先按官方指南完成 Flutter SDK 的安装配置。完整的构建与安装步骤如下cd $FLUTTER_ROOT/examples/stocks # README 原始路径当前仓库中对应 dev/benchmarks/test_apps/stocks flutter pub get flutter run --release其中flutter run --release一条命令同时完成构建与安装到设备两个动作以 Release 模式启动应用。结合当前仓库的 pubspec.yaml可以补充几个对构建有实际影响的细节name: stocks environment: sdk: ^3.11.0-0 resolution: workspace dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: any http: any dev_dependencies: flutter_test: sdk: flutter flutter_driver: sdk: flutter test: any flutter: generate: true uses-material-design: trueflutter_localizations与intl是国际化能力的依赖前提下文详述intl: any的写法依赖 pub 解析时与flutter_localizations所固定的版本保持一致flutter: generate: true是关键开关它让flutter pub get/flutter run等命令在构建前自动执行本地化代码生成无需手工调用flutter gen-l10nresolution: workspace表示该应用参与仓库级 Dart workspace 的依赖解析flutter_driver与test作为 dev 依赖支撑了后文的驱动级滚动性能测试。入口架构主题、路由与调试开关main.dart 中的StocksAppState是理解整个应用的钥匙。它维护一个StockConfiguration配置对象集中管理以下状态stockModeoptimistic乐观或pessimistic悲观分别映射到Brightness.light与Brightness.dark即通过情绪切换明暗主题backupMode云端备份开关一组渲染调试开关debugShowGrid、debugShowSizes、debugShowBaselines、debugShowLayers、debugShowPointers、debugShowRainbow以及showPerformanceOverlay、showSemanticsDebugger。build方法将这些配置落实到MaterialApp上return MaterialApp( title: Stocks, theme: theme, localizationsDelegates: StockStrings.localizationsDelegates, supportedLocales: StockStrings.supportedLocales, debugShowMaterialGrid: _configuration.debugShowGrid, showPerformanceOverlay: _configuration.showPerformanceOverlay, showSemanticsDebugger: _configuration.showSemanticsDebugger, routes: String, WidgetBuilder{ /: (BuildContext context) StockHome(stocks, _configuration, configurationUpdater), /settings: (BuildContext context) StockSettings(_configuration, configurationUpdater), }, onGenerateRoute: _getRoute, );从源码结构看路由分为两类routes表静态声明了/主页 stock_home.dart 的StockHome与/settingsstock_settings.dart 的StockSettings而onGenerateRoute_getRoute动态处理/stock路径——把settings.arguments中的股票代码作为参数构建StockSymbolPage这正是主页中Navigator.pushNamed(context, /stock, arguments: stock.symbol)打开个股详情页的落点。此外StocksAppState还在assert块中把调试开关同步到package:flutter/rendering.dart的顶层布尔量如debugPaintSizeEnabled、debugRepaintRainbowEnabled等。这些开关只在调试模式生效对应的设置项也只在 stock_settings.dart 的assert(() {...}())块内添加——这意味着 Release 构建中用户看不到Show construction lines (for debugging)这类仅调试可用的行这是用assert包裹仅调试功能的范例写法。主页StockHome则是一个 Material 组件的博物馆DefaultTabControllerTabBar/TabBarView双 TabMarket 与 Portfolio、Drawer抽屉、PopupMenuButton弹出菜单含动画速度调节直接操作timeDilation、TextField搜索栏用LocalHistoryEntry使返回键可退出搜索、FloatingActionButton加showModalBottomSheet底部弹层、SnackBar购买提示等基本覆盖了 README 所称Material Design widgets演示的目标。国际化i18ngen_l10n 完整工作流README 的 Internationalization 一节指向 lib/i18n/regenerate.md该文档与仓库源码一起构成了一套可直接照搬的本地化方案。工作流概览lib/i18n/目录下的 ARB 文件是输入源stocks_en.arb模板、stocks_en_US.arb、stocks_es.arbflutter gen-l10n工具由 pubspec 中generate: true驱动根据 l10n.yaml 的选项从 ARB 文件生成stock_strings.dart其中包含StockStrings抽象类应用通过StockStrings.of(context)查找当前设备语言对应的本地化字符串应用依赖 Dart 的intl包完成底层消息处理。模板文件 stocks_en.arb 中每个文案都附带前缀的元数据描述这是 ARB 规范推荐的写法{ title: Stocks, title: { description: Title for the Stocks application }, market: MARKET, market: { description: Label for the Market tab }, portfolio: PORTFOLIO, portfolio: { description: Label for the Portfolio tab } }西班牙语文件 stocks_es.arb 提供了对应翻译title: Acciones、market: MERCADO、portfolio: CARTERA而 stocks_en_US.arb 目前与英文模板取值相同。按 regenerate.md 的说明要更新英文和西班牙语的本地化修改这三个 ARB 文件即可要修改本地化工具的项目配置则改l10n.yaml。l10n.yaml 配置参数逐项说明l10n.yaml 是这套方案的核心配置文件内注释非常完整整理如下配置项当前取值作用arb-dirlib/i18n输入 ARB 文件所在目录未显式指定输出目录时输出目录与输入目录一致本例中生成文件就写回lib/i18n/header-fileheader.txt每个生成文件头部插入的自定义文件头output-classStockStrings应用中要使用的本地化类名需在整个应用中导入output-localization-filestock_strings.dart生成文件的主文件名template-arb-filestocks_en.arb模板 ARB 文件工具用它来校验其余 ARB 文件的键是否完整一致nullable-getterfalse生成非空StockStringsgetter免去应用中的空值检查formattrue对生成的本地化文件运行 formatter其中 header.txt 的内容是版权声明加上// THE FOLLOWING FILES WERE GENERATED BY flutter gen-l10n.的生成标记——在 stock_strings.dart 第 5 行可以看到它已注入生成文件头部。生成类与语言回退链生成的 stock_strings.dart 包含三个要点StockStrings抽象类声明title、market、portfolio三个字符串 getter提供of(BuildContext)、delegate、localizationsDelegates与supportedLocales静态成员。文档注释还特别提醒iOS 应用需要在ios/Runner/Info.plist中通过 Localizations 项声明支持的语言且该列表要与StockStrings.supportedLocales保持一致supportedLocalesLocale(en)、Locale(en, US)、Locale(es)lookupStockStrings的回退逻辑先按语言国家精确匹配enUS返回StockStringsEnUs再按语言码兜底en→StockStringsEnes→StockStringsEs都不匹配则抛出带工具报错提示的FlutterError。regenerate.md 对继承链的描述是这套方案最容易被忽略但最关键的设计StockStringsEn与StockStringsEs继承StockStrings而StockStringsEnUs继承StockStringsEn——这使得en_US区域可以自动回退fall back到StockStringsEn中的消息。也就是说未来若为en_US只翻译了market其余文案会自然落到英文通用版本翻译者无需覆盖全部键。接入方式在 main.dart 中只用了两行localizationsDelegates与supportedLocales而StockStrings.localizationsDelegates内部已聚合了delegate、GlobalMaterialLocalizations.delegate、GlobalCupertinoLocalizations.delegate和GlobalWidgetsLocalizations.delegate四个委托。stock_home.dart 中的实际取词示例title: Text(StockStrings.of(context).title), // ... bottom: TabBar( tabs: Widget[ Tab(text: StockStrings.of(context).market), Tab(text: StockStrings.of(context).portfolio), ], ),这一行为有测试用例兜底验证test/locale_test.dart 先断言默认环境下能看到MARKET然后tester.binding.setLocale(es, )切换语言并再次 pump断言 Tab 文本变为MERCADO——恰好对应stocks_es.arb中的market翻译闭环验证了 ARB → 生成类 → Widget 取值的整条链路。图标制作说明README 的 Icon 一节交代了应用图标的来源使用 Android Asset Studio 在线工具制作素材取自公共领域public domain的 Tango Go Up 剪贴画OpenClipart 编号 30403配色参数为前景色#607d8b、白色方形背景、无特效。生成产物就是android/app/src/main/res/mipmap-*/下从 mdpi 到 xxxhdpi 的各密度ic_launcher.png以及 iOS 侧ios/Runner/Assets.xcassets/AppIcon.appiconset/下各尺寸的Icon-*.png。测试与性能驱动作为dev/benchmarks下的测试应用Stocks 还附带两类自动化测试单元测试除 locale_test.dart 外还有search_test.dart与icon_color_test.dart且locale_test.dart通过stock_data.StockData.actuallyFetchData false关闭真实数据抓取保证测试可离线运行驱动级滚动性能测试test_driver/scroll_perf_test.dart 通过FlutterDriver连接设备用driver.traceAction包裹对ValueKey(stock-list)找到的股票列表上下各滚动 5 次、每次 300 逻辑像素的操作序列再用TimelineSummary.summarize汇总 Timeline 并写入stocks_scroll_perf文件。这说明 Stocks 列表的ValueKey(stock-list)并非随便标注而是为外部性能度量预留的锚点。小结Stocks 演示应用把 README 承诺的三件事落得相当扎实用flutter run --release三步构建安装用generate: truel10n.yaml ARB 模板文件实现了一条改 ARB 即更新本地化的低摩擦国际化管线其en_US → en的继承回退设计值得直接借鉴同时它还以StockConfiguration 设置页开关的形式演示了如何把 Flutter 的渲染调试工具暴露给最终用户界面。对读者而言把 l10n.yaml 的七个参数、regenerate.md 的回退链说明和 main.dart 的两行接入代码组合起来就是一个可以立即复现的 gen_l10n 最小完整方案。【免费下载链接】flutterFlutter makes it easy and fast to build beautiful apps for mobile and beyond项目地址: https://gitcode.com/GitHub_Trending/flutter41/flutter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Flutter Stocks 演示应用实战：构建安装、Material 组件与 gen_l10n 国际化全流程解析
Flutter Stocks 演示应用实战构建安装、Material 组件与 gen_l10n 国际化全流程解析【免费下载链接】flutterFlutter makes it easy and fast to build beautiful apps for mobile and beyond项目地址: https://gitcode.com/GitHub_Trending/flutter41/flutterStocks 是 Flutter 仓库内置的演示应用demo app用于展示 Material Design 组件库及其他 Flutter 核心特性同时它也是dev/benchmarks目录下的滚动性能测试对象。读完本篇你将掌握 Stocks 应用的构建与安装方法、其入口路由与主题架构以及基于gen_l10n工具链的 ARB 文件国际化完整工作流——从.arb文案文件、l10n.yaml配置到生成StockStrings类并接入MaterialApp的每一步都能直接复用到自己的项目中。应用定位与仓库位置根据 README.mdStocks 的定位非常明确Demo app for the Material Design widgets and other features provided by Flutter即一个展示 Material 组件与 Flutter 特性的演示应用。此外README 还说明该应用已经完成了国际化just enough to show how its done作为gen_l10n工具的使用示例。需要留意的是README 中构建一节给出的路径cd $FLUTTER_ROOT/examples/stocks是该应用历史上所在的examples/目录在当前仓库中这个应用实际位于dev/benchmarks/test_apps/stocks它同时承担着基准测试benchmark测试对象的角色——目录下带有test_driver/scroll_perf_test.dart这类驱动测试详见文末测试与性能驱动一节。从源码结构看应用主体由以下 Dart 文件组成位于 lib/ 目录main.dart应用入口负责主题、路由与本地化接入stock_home.dart主页包含 TabBar、搜索、Drawer、底部弹层等 Material 组件的综合运用stock_settings.dart设置页提供一系列渲染调试开关stock_list.dart、stock_row.dart股票列表与行组件stock_data.dart模拟数据源i18n/国际化资源与生成文件ARB 文件、StockStrings类及说明文档 regenerate.md。平台侧则包含标准的 Androidandroid/带 Gradle lockfile与 iOSios/含 Xcode 工程与 AppIcon 资源集工程目录。构建与安装README 给出的构建流程非常简单前提条件是先按官方指南完成 Flutter SDK 的安装配置。完整的构建与安装步骤如下cd $FLUTTER_ROOT/examples/stocks # README 原始路径当前仓库中对应 dev/benchmarks/test_apps/stocks flutter pub get flutter run --release其中flutter run --release一条命令同时完成构建与安装到设备两个动作以 Release 模式启动应用。结合当前仓库的 pubspec.yaml可以补充几个对构建有实际影响的细节name: stocks environment: sdk: ^3.11.0-0 resolution: workspace dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: any http: any dev_dependencies: flutter_test: sdk: flutter flutter_driver: sdk: flutter test: any flutter: generate: true uses-material-design: trueflutter_localizations与intl是国际化能力的依赖前提下文详述intl: any的写法依赖 pub 解析时与flutter_localizations所固定的版本保持一致flutter: generate: true是关键开关它让flutter pub get/flutter run等命令在构建前自动执行本地化代码生成无需手工调用flutter gen-l10nresolution: workspace表示该应用参与仓库级 Dart workspace 的依赖解析flutter_driver与test作为 dev 依赖支撑了后文的驱动级滚动性能测试。入口架构主题、路由与调试开关main.dart 中的StocksAppState是理解整个应用的钥匙。它维护一个StockConfiguration配置对象集中管理以下状态stockModeoptimistic乐观或pessimistic悲观分别映射到Brightness.light与Brightness.dark即通过情绪切换明暗主题backupMode云端备份开关一组渲染调试开关debugShowGrid、debugShowSizes、debugShowBaselines、debugShowLayers、debugShowPointers、debugShowRainbow以及showPerformanceOverlay、showSemanticsDebugger。build方法将这些配置落实到MaterialApp上return MaterialApp( title: Stocks, theme: theme, localizationsDelegates: StockStrings.localizationsDelegates, supportedLocales: StockStrings.supportedLocales, debugShowMaterialGrid: _configuration.debugShowGrid, showPerformanceOverlay: _configuration.showPerformanceOverlay, showSemanticsDebugger: _configuration.showSemanticsDebugger, routes: String, WidgetBuilder{ /: (BuildContext context) StockHome(stocks, _configuration, configurationUpdater), /settings: (BuildContext context) StockSettings(_configuration, configurationUpdater), }, onGenerateRoute: _getRoute, );从源码结构看路由分为两类routes表静态声明了/主页 stock_home.dart 的StockHome与/settingsstock_settings.dart 的StockSettings而onGenerateRoute_getRoute动态处理/stock路径——把settings.arguments中的股票代码作为参数构建StockSymbolPage这正是主页中Navigator.pushNamed(context, /stock, arguments: stock.symbol)打开个股详情页的落点。此外StocksAppState还在assert块中把调试开关同步到package:flutter/rendering.dart的顶层布尔量如debugPaintSizeEnabled、debugRepaintRainbowEnabled等。这些开关只在调试模式生效对应的设置项也只在 stock_settings.dart 的assert(() {...}())块内添加——这意味着 Release 构建中用户看不到Show construction lines (for debugging)这类仅调试可用的行这是用assert包裹仅调试功能的范例写法。主页StockHome则是一个 Material 组件的博物馆DefaultTabControllerTabBar/TabBarView双 TabMarket 与 Portfolio、Drawer抽屉、PopupMenuButton弹出菜单含动画速度调节直接操作timeDilation、TextField搜索栏用LocalHistoryEntry使返回键可退出搜索、FloatingActionButton加showModalBottomSheet底部弹层、SnackBar购买提示等基本覆盖了 README 所称Material Design widgets演示的目标。国际化i18ngen_l10n 完整工作流README 的 Internationalization 一节指向 lib/i18n/regenerate.md该文档与仓库源码一起构成了一套可直接照搬的本地化方案。工作流概览lib/i18n/目录下的 ARB 文件是输入源stocks_en.arb模板、stocks_en_US.arb、stocks_es.arbflutter gen-l10n工具由 pubspec 中generate: true驱动根据 l10n.yaml 的选项从 ARB 文件生成stock_strings.dart其中包含StockStrings抽象类应用通过StockStrings.of(context)查找当前设备语言对应的本地化字符串应用依赖 Dart 的intl包完成底层消息处理。模板文件 stocks_en.arb 中每个文案都附带前缀的元数据描述这是 ARB 规范推荐的写法{ title: Stocks, title: { description: Title for the Stocks application }, market: MARKET, market: { description: Label for the Market tab }, portfolio: PORTFOLIO, portfolio: { description: Label for the Portfolio tab } }西班牙语文件 stocks_es.arb 提供了对应翻译title: Acciones、market: MERCADO、portfolio: CARTERA而 stocks_en_US.arb 目前与英文模板取值相同。按 regenerate.md 的说明要更新英文和西班牙语的本地化修改这三个 ARB 文件即可要修改本地化工具的项目配置则改l10n.yaml。l10n.yaml 配置参数逐项说明l10n.yaml 是这套方案的核心配置文件内注释非常完整整理如下配置项当前取值作用arb-dirlib/i18n输入 ARB 文件所在目录未显式指定输出目录时输出目录与输入目录一致本例中生成文件就写回lib/i18n/header-fileheader.txt每个生成文件头部插入的自定义文件头output-classStockStrings应用中要使用的本地化类名需在整个应用中导入output-localization-filestock_strings.dart生成文件的主文件名template-arb-filestocks_en.arb模板 ARB 文件工具用它来校验其余 ARB 文件的键是否完整一致nullable-getterfalse生成非空StockStringsgetter免去应用中的空值检查formattrue对生成的本地化文件运行 formatter其中 header.txt 的内容是版权声明加上// THE FOLLOWING FILES WERE GENERATED BY flutter gen-l10n.的生成标记——在 stock_strings.dart 第 5 行可以看到它已注入生成文件头部。生成类与语言回退链生成的 stock_strings.dart 包含三个要点StockStrings抽象类声明title、market、portfolio三个字符串 getter提供of(BuildContext)、delegate、localizationsDelegates与supportedLocales静态成员。文档注释还特别提醒iOS 应用需要在ios/Runner/Info.plist中通过 Localizations 项声明支持的语言且该列表要与StockStrings.supportedLocales保持一致supportedLocalesLocale(en)、Locale(en, US)、Locale(es)lookupStockStrings的回退逻辑先按语言国家精确匹配enUS返回StockStringsEnUs再按语言码兜底en→StockStringsEnes→StockStringsEs都不匹配则抛出带工具报错提示的FlutterError。regenerate.md 对继承链的描述是这套方案最容易被忽略但最关键的设计StockStringsEn与StockStringsEs继承StockStrings而StockStringsEnUs继承StockStringsEn——这使得en_US区域可以自动回退fall back到StockStringsEn中的消息。也就是说未来若为en_US只翻译了market其余文案会自然落到英文通用版本翻译者无需覆盖全部键。接入方式在 main.dart 中只用了两行localizationsDelegates与supportedLocales而StockStrings.localizationsDelegates内部已聚合了delegate、GlobalMaterialLocalizations.delegate、GlobalCupertinoLocalizations.delegate和GlobalWidgetsLocalizations.delegate四个委托。stock_home.dart 中的实际取词示例title: Text(StockStrings.of(context).title), // ... bottom: TabBar( tabs: Widget[ Tab(text: StockStrings.of(context).market), Tab(text: StockStrings.of(context).portfolio), ], ),这一行为有测试用例兜底验证test/locale_test.dart 先断言默认环境下能看到MARKET然后tester.binding.setLocale(es, )切换语言并再次 pump断言 Tab 文本变为MERCADO——恰好对应stocks_es.arb中的market翻译闭环验证了 ARB → 生成类 → Widget 取值的整条链路。图标制作说明README 的 Icon 一节交代了应用图标的来源使用 Android Asset Studio 在线工具制作素材取自公共领域public domain的 Tango Go Up 剪贴画OpenClipart 编号 30403配色参数为前景色#607d8b、白色方形背景、无特效。生成产物就是android/app/src/main/res/mipmap-*/下从 mdpi 到 xxxhdpi 的各密度ic_launcher.png以及 iOS 侧ios/Runner/Assets.xcassets/AppIcon.appiconset/下各尺寸的Icon-*.png。测试与性能驱动作为dev/benchmarks下的测试应用Stocks 还附带两类自动化测试单元测试除 locale_test.dart 外还有search_test.dart与icon_color_test.dart且locale_test.dart通过stock_data.StockData.actuallyFetchData false关闭真实数据抓取保证测试可离线运行驱动级滚动性能测试test_driver/scroll_perf_test.dart 通过FlutterDriver连接设备用driver.traceAction包裹对ValueKey(stock-list)找到的股票列表上下各滚动 5 次、每次 300 逻辑像素的操作序列再用TimelineSummary.summarize汇总 Timeline 并写入stocks_scroll_perf文件。这说明 Stocks 列表的ValueKey(stock-list)并非随便标注而是为外部性能度量预留的锚点。小结Stocks 演示应用把 README 承诺的三件事落得相当扎实用flutter run --release三步构建安装用generate: truel10n.yaml ARB 模板文件实现了一条改 ARB 即更新本地化的低摩擦国际化管线其en_US → en的继承回退设计值得直接借鉴同时它还以StockConfiguration 设置页开关的形式演示了如何把 Flutter 的渲染调试工具暴露给最终用户界面。对读者而言把 l10n.yaml 的七个参数、regenerate.md 的回退链说明和 main.dart 的两行接入代码组合起来就是一个可以立即复现的 gen_l10n 最小完整方案。【免费下载链接】flutterFlutter makes it easy and fast to build beautiful apps for mobile and beyond项目地址: https://gitcode.com/GitHub_Trending/flutter41/flutter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考