Flutter开发中静态图片和字体导致帧率下降的解决方案

发布：更新时间：2024-08-26 09:51:17

最近在Flutter开发中发现，引入像素较大的静态图片或字体会导致在高刷手机上帧率降至60的问题。

测试设备为小米13，可以在开发者选项中直接打开帧率显示，也可以使用
statsfl
插件显示帧率。

解决方案

解决大图片问题

为了解决大图片导致帧率下降的问题，可以适当缩小图片分辨率以及压缩图片。

1、在PS中，先将图片转换为智能对象，然后按像素调整图像大小，之后保存图片。这样做可以最大限度保留清晰度。

Photopea | Online Photo Editor
【在线PS】PS软件网页版_ps在线图片处理工具photopea-江下科技在线应用 (onlinedo.cn)
【在线PS】PS软件网页版，ps在线图片处理工具photopea-稿定设计PS (gaoding.com)

2、推荐使用图片压缩网站：

https://www.bejson.com/ui/compress_img/
Caesium Image Compressor - Online

解决字体问题

对于静态字体方式导致的帧率下降问题，可以将网络字体下载到本地，然后进行动态加载。

1、字体初始化工具类：


import 'dart:io';
import 'package:flutter/services.dart';
import 'package:muen_edu_app/network/dio/dio_instance.dart';
import 'package:muen_edu_app/utils/file_utils.dart';

class FontUtils {
  // 省略部分代码
}

2、文件工具类：


import 'dart:io';
import 'package:muen_edu_app/network/dio/dio_instance.dart';
import 'package:path_provider/path_provider.dart';

class FileUtils {
  // 省略部分代码
}

3、dio下载：


Future<Response> download(
  String url,
  String savePath, {
  CancelToken? cancelToken,
  Options? options,
  void Function(int, int)? onReceiveProgress,
}) async {
  // 省略部分代码
}

4、调用初始化方法：