Flutter调试debug或者打包release帧率只有60的原因

问题描述

最近发现Flutter中引入像素较大的静态图片或者字体导致调试或者打包之后在高刷手机上帧率只有60的问题。

• 测试设备为小米13，可在开发者选项中直接打开帧率显示，

• 也可使用statsfl插件显示帧率

  StatsFl(
      maxFps: 120, // Support custom FPS target (default is 60)
      align: Alignment.bottomCenter, //Alignment of statsbox
      child: MyApp(),
  ),
  

解决方案

大图片问题

可以适当缩小图片分辨率以及压缩图片。

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 {
  static FontUtils? _instan;
  final Map<String, String> fontFamilies = {
    "JiangCheng": "https://xxx.ttf",
    "SegoeUI": "https://xxx.ttf",
  };
  final String fontFloder = "fonts";

  FontUtils._();

  static FontUtils get instan => _instan ??= FontUtils._();

  Future initiaFont() async {
    String jiangCheng =
        await FileUtils.ins.getLocalDocumentFile(fontFloder, "JiangCheng.ttf");
    String segoeUI =
        await FileUtils.ins.getLocalDocumentFile(fontFloder, "SegoeUI.ttf");
    await loadFont(File(jiangCheng), "JiangCheng");
    await loadFont(File(segoeUI), "SegoeUI");
  }

  /// 加载字体
  Future loadFont(File fontFile, String fontFamily) async {
    if (!fontFile.existsSync()) {
      // 没有字体，去下载
      await downloadFont(fontFamilies[fontFamily]!, fontFamily);
    }
    Future<ByteData> readFont() async {
      ByteData byteData = (await fontFile.readAsBytes()).buffer.asByteData();
      return byteData;
    }

    FontLoader loader = FontLoader(fontFamily);
    loader.addFont(readFont());
    await loader.load();
  }

  Future<String> downloadFont(String url, String fontFamily) async {
    String savePath =
        await FileUtils.ins.getLocalDocumentFile(fontFloder, '$fontFamily.ttf');
    await DioInstance.instan.download(url, savePath);
    return savePath;
  }
}

2、文件工具类

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

class FileUtils {
  static FileUtils? _ins;

  FileUtils._();
  static FileUtils get ins {
    return _ins ??= FileUtils._();
  }

  /// 获取文档目录文件
  Future<String> getLocalDocumentFile(String folder, String filename) async {
    final dir = await getApplicationDocumentsDirectory();
    return '${dir.path}/$folder/$filename';
  }

  /// 获取临时目录文件
  Future<String> getLocalTemporaryFile(String folder, String filename) async {
    final dir = await getTemporaryDirectory();
    return '${dir.path}/$folder/$filename';
  }

  /// 获取应用程序目录文件
  Future<String> getLocalSupportFile(String folder, String filename) async {
    final dir = await getApplicationSupportDirectory();
    return '${dir.path}/$folder/$filename';
  }
}

3、dio下载

Future<Response> download(
  String url,
  String savePath, {
  CancelToken? cancelToken,
  Options? options,
  void Function(int, int)? onReceiveProgress,
}) async {
  return await _dio.download(
    url,
    savePath,
    onReceiveProgress: onReceiveProgress,
    options: options ??
        Options(
          method: HttpMethods.get,
          responseType: ResponseType.bytes,
          receiveTimeout: _defaultTime,
          sendTimeout: _defaultTime,
        ),
  );
}

4、调用初始化方法

FontUtils.instan.initiaFont();

5、设置全局默认字体

ThemeData(fontFamily: 'JiangCheng');