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