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

本文來自博客園，作者：sw-code，轉載請註明原文鏈接：https://www.cnblogs.com/sw-code/p/18378844