Flutter 国际化(二) - 图片使用FlutterAssetsGenerator插件管理assets资源，缓存所有

FlutterAssetsGenerator插件

完整代码

插件主页

安装`FlutterAssetsGenerator`插件

在插件市场找到FlutterAssetsGenerator，安装后，重新启动Android Studio

QQ截图20230913232627.png

添加图片

添加assets文件夹后，添加对应的资源文件夹，我们定义img文件夹放入通用图片，img_zh_cn放入需要国际化的图片，加入图片后，会自动生成Assets类，里面包含对应资源的路径

QQ截图20230913233333.png

配置图片资源

右键点击文件夹，选择Flutter: Configuring Paths

QQ截图20230913233004.png

在pubspec.yaml中，会自动插入选择的文件夹。

  assets:
    - assets/html/
    - assets/img/
    - assets/img_zh_cn/

图片国际化

代码处理

原理：判断如果某张图片有对应的国际化图片，使用国际化图片，否则使用原图

在main.dart获取assets文件夹下所有的资源路径，并存储为assetPaths

List<String> assetPaths = [];

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  assetPaths = await AssetsUtil.getAssetsList();
  runApp(const MyApp());
}

获取资源工具类

class AssetsUtil {
  static Future<List<String>> getAssetsList() async {
    final assetBundle = rootBundle;
    final manifestContent = await assetBundle.loadString('AssetManifest.json');
    final Map<String, dynamic> manifestMap = json.decode(manifestContent);
    return manifestMap.keys.where((String key) => key.startsWith('assets/')).toList();
  }
}

再写一个extension方便图片处理国际化

extension AssetsIntlExtension on String {
  ///判断如果某张图片有对应的国际化图片，使用国际化图片，否则使用原图
  String get intl {
    String path = replaceAll("assets/img", "assets/img_${localeChangeNotifier.locale!.toString().toLowerCase()}");
    if (assetPaths.contains(path)) {
      return path;
    } else {
      return this;
    }
  }
}

使用

Image.asset(
  Assets.imgFlag.intl,
  height: 100,
)

Flutter 国际化(二) - 图片