菜鸟头条

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

2024-08-25 13:02 由 sw-code 发表于 #移动端开发

问题描述

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

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

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

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

解决方案

大图片问题

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

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

2、图片压缩网站推荐

字体问题

不能通过静态字体方式，可以将网络字体下载到本地，然后动态加载。

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');