skin_assets_runtime 0.0.1

A tool to generate skin asset Dart code.

背景

为 flutter app 提供一个皮肤资源包的功能，可以把资源包可以存在 sdcard 中。在代码中通过 context.image(R.images.ponyhiV3.menu.bgMenu,{//...}) 就能获取图片组件。

目录结构

skins
└── dragon_boat_2025
    └── assets
        ├── amap
        ├── audio
        ├── images
        │   └── ponyhi_v3
        │       ├── menu
        │       │   ├── bg_menu_dark.webp
        │       │   ├── bg_menu.webp
        │       │   ├── bg_menu_yaxun_dark.webp
        │       │   └── bg_menu_yaxun.webp
        │       ├── phone_verify
        │       │   ├── bg_phone_verify_dark.webp
        │       │   ├── bg_phone_verify.webp
        │       │   ├── bg_phone_verify_yaxun_dark.webp
        │       │   └── bg_phone_verify_yaxun.webp
        │       └── popo
        │           ├── bg_bubble_left_top_dark.webp
        │           ├── bg_bubble_left_top.webp
        │           ├── bg_bubble_right_bottom_dark.webp
        │           ├── bg_bubble_right_bottom.webp
        │           ├── bg_bubble_right_top_dark.webp
        │           ├── bg_bubble_right_top.webp
        │           ├── bg_popo_alert_dark.webp
        │           ├── bg_popo_alert.webp
        │           ├── bg_popo_tips_dark.webp
        │           ├── bg_popo_tips.webp
        │           ├── popo_bg_2.webp
        │           └── popo_bg_3.webp
        ├── rives
        ├── tts
        ├── values
        │   ├── colors_dark.xml
        │   ├── colors.xml
        │   ├── strings_en.xml
        │   └── strings.xml
        └── video

资源调用类

core/asset_generator.dart 可以生成资源调用类

上面的例子，期望生成 actual_data/assets.gen.dart

class Assets {
  static const $Assets assets = $Assets();
}

class $Assets {
  final String path = 'assets';
  const $Assets();

  $AssetsImages get images => const $AssetsImages();
  $AssetsValues get values => const $AssetsValues();
}

class $AssetsImages {
  final String path = 'assets/images';
  const $AssetsImages();

  $AssetsImagesPonyhiV3 get ponyhiV3 => const $AssetsImagesPonyhiV3();
  $AssetsImagesPopo get popo => const $AssetsImagesPopo();
}

class $AssetsImagesPonyhiV3 {
  final String path = 'assets/images/ponyhi_v3';
  const $AssetsImagesPonyhiV3();

  $AssetsImagesPonyhiV3Popo get popo => const $AssetsImagesPonyhiV3Popo();
  $AssetsImagesPonyhiV3Menu get menu => const $AssetsImagesPonyhiV3Menu();
  $AssetsImagesPonyhiV3PhoneVerify get phoneVerify => const $AssetsImagesPonyhiV3PhoneVerify();
}

class $AssetsImagesPonyhiV3Popo {
  final String path = 'assets/images/ponyhi_v3/popo';
  const $AssetsImagesPonyhiV3Popo();

  FileAssetImage popoBg5({ResourceQualifiers? spec, bool? onlyUseAsset}) {
    return FileAssetImage(
        dirPath: path,
        resId: 'popo_bg_5',
        assetFiles: _popoBg5Files,
        spec: spec,
        onlyUseAsset: onlyUseAsset);
  }
  static const _popoBg5Files = <String>[
    'popo_bg_5.webp',
  ];
}
...

资源文件的调用方式

Assets.assets.images.ponyhiV3.popo.popoBg5().image(
                          scale: 2,
                        );

资源值配置

支持文件类型: xml 支持资源值类型: String,StringArray,Color,Double 文件名是可以任意，但符合字段命名规则

<!-- colors.xml -->
<resources>
    <color name="robotaxi_safe_check_mask_start">#99B8E6BE</color>
    <color name="robotaxi_safe_check_mask_end">#00B8E6BE</color>
</resources>


<!-- colors_dark.xml -->
<resources>
    <color name="robotaxi_safe_check_mask_start">#B3203836</color>
    <color name="robotaxi_safe_check_mask_end">#00203836</color>
</resources>


<!-- strings.xml -->
<resources>
    <string name="popo_click_say_hi_tips_welcome">端午安康，祥瑞相随</string>
    <array name="popo_click_say_hi_tips">
        <item>艾蒲凝香，吉祥萦绕，福泽绵长</item>
        <item>龙舟竞渡迎端阳，顺遂安康福满堂</item>
        <item>甜咸粽子我都爱吃~</item>
        <item>粽子一口接一口，根本炫不够</item>
        <item>有机会我也要去划划龙舟</item>
        <item>你好呀，我是POPO～</item>
        <item>报告！开车专注力100%</item>
        <item>距离目的地还有{dis}公里</item>
    </array>
</resources>

<!-- strings_en.xml -->
<resources>
    <string name="popo_click_say_hi_tips_welcome"></string>
    <string-array name="popo_click_say_hi_tips">
        <item>Happy Dragon Boat Festival!</item>
        <item>Enjoy your Zongzi time!</item>
        <item>I drive safely and smoothly</item>
        <item>I\'ve got 360° covered!</item>
        <item>I spot stuff hundreds of meters out.</item>
        <item>Hi~  I\'m POPO</item>
        <item>100% locked in, always!</item>
        <item>Remained {dis}km</item>
    </string-array>
</resources>

资源值的调用

String R.string.popoClickSayHiTipsWelcome({ResourceQualifiers? spec, bool? onlyUseAsset});

List<String> R.string.popoClickSayHiTips({ResourceQualifiers? spec, bool? onlyUseAsset});

Color R.color.robotaxiSafeCheckMaskStart({ResourceQualifiers? spec, bool? onlyUseAsset});

bool、double

资源限定符

支持尾缀带上配置的限定符，但资源 id 是不带限定符的

  final qualifiers = {
    'lang': ['en', 'zh', 'ko'],
    'theme': ['light', 'dark'],
    'device': ['yaxun'],
  };

运行时组件

这些运行时组件，有两个必要参数。string resId 和 bool inAssets

todo

[] p1 再梳理一下文件和类分布,简化 example 使用,

• 例如 FileAssetsLoader 封装为一个 widget,直接把 init,dispose,provider 监听这些封装好

[] p0 发布 plugin [x] p0 ResourceQualifiers 应该改成用 map,不再维护具体业务逻辑 [] p0 集成到 ponyhi 中 [] p0 yaml 定义 config