美文网首页Android
Flutter 字体动态加载

Flutter 字体动态加载

作者: 卢融霜 | 来源:发表于2021-12-10 09:23 被阅读0次

前言

Flutter在运行web版时,加载完成字体之后,才会展示页面,巧合的是我的字体文件是4.8M,更巧合的是,我部署的服务器宽带只有1M,加载完成需要40秒,所以我想到了字体延迟加载,或者动态加载。
最终的解决思路就是:
web版 字体从uniCloud云存储获取,宽带比我部署的服务器快,还免费。(加载完成是500ms)
手机应用的字体,从 assets文件夹中获取即可(如果考虑到包体积,当然也可以远程加载)。

代码

 var fontLoader = FontLoader("hk");
      fontLoader.addFont(fetchFont());
      await fontLoader.load();
Future<ByteData> fetchFont() async {
  if (kIsWeb) {
    var url = Uri.parse(
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2243c45a-8403-4ee4-8a56-a7a20bd7f54e/66037e2d-c64e-4184-8143-50635f1dcc98.TTC');
    final response = await get(url);

    if (response.statusCode == 200) {
      return ByteData.view(response.bodyBytes.buffer);
    } else {
      throw Exception('Failed to load font');
    }
  } else {
    var bytes = await rootBundle.load("assets/fonts/hkktW5.TTC");
    return bytes;
  }
}
return MaterialApp( theme: ThemeData(fontFamily: "hk"));

后续优化的话,记得缓存,web加载一次之后,可以将 ByteData进行缓存。
如果手机应用不考虑网络的话,可以进行远程加载一次后,进行保存到本地。

相关文章

网友评论

    本文标题:Flutter 字体动态加载

    本文链接:https://www.haomeiwen.com/subject/myqcfrtx.html