Location>code7788 >text

Flutter debugging debug or package release frame rate only 60 reasons

Popularity:319 ℃/2024-08-26 13:48:39

Description of the problem

Recently, I found that introducing static images or fonts with large pixels in Flutter resulted in an issue where the frame rate was only 60 on high-brush phones after debugging or packaging.

  • The test device is a Xiaomi 13, which can be used to turn on the frame rate display directly in the developer options.

  • Also availablestatsflPlug-in display frame rate

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

prescription

Big Picture Problems

You can reduce the image resolution as well as compress the image appropriately.

1, PS in the first to convert the image to a smart object, and then resize the image (by pixels), after which the image is saved. Doing so preserves maximum clarity.

  • Photopea | Online Photo Editor
  • Online PS】PS software web version_ps online image processing tool photopea - Jiangxia Technology Online Application ()
  • Online PS】PS software web version, ps online image processing tool photopea - Drafting Design PS ()

2、Picture compression site recommendations

  • /ui/compress_img/
  • Caesium Image Compressor - Online

Font issues

It can't be done by static fonts, you can download the web fonts locally and load them dynamically.

1、Font initialization tool class

import 'dart:io';
import 'package:flutter/';
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": "",
    "SegoeUI": "",
  };
  final String fontFloder = "fonts";

  FontUtils._();

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

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

  /// Loading Fonts
  Future loadFont(File fontFile, String fontFamily) async {
    if (!()) {
      // No font,Go to download
      await downloadFont(fontFamilies[fontFamily]!, fontFamily);
    }
    Future<ByteData> readFont() async {
      ByteData byteData = (await ()).();
      return byteData;
    }

    FontLoader loader = FontLoader(fontFamily);
    (readFont());
    await ();
  }

  Future<String> downloadFont(String url, String fontFamily) async {
    String savePath =
        await (fontFloder, '$');
    await (url, savePath);
    return savePath;
  }
}

2. Documentation tools

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._();
  }

  /// Get document catalog file
  Future<String> getLocalDocumentFile(String folder, String filename) async {
    final dir = await getApplicationDocumentsDirectory();
    return '${}/$folder/$filename';
  }

  /// Getting Temporary Directory Files
  Future<String> getLocalTemporaryFile(String folder, String filename) async {
    final dir = await getTemporaryDirectory();
    return '${}/$folder/$filename';
  }

  /// Get the application directory file
  Future<String> getLocalSupportFile(String folder, String filename) async {
    final dir = await getApplicationSupportDirectory();
    return '${}/$folder/$filename';
  }
}

3. dio download

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: ,
          responseType: ,
          receiveTimeout: _defaultTime,
          sendTimeout: _defaultTime,
        ),
  );
}

4. Calling the initialization method

();

5. Set the global default font

ThemeData(fontFamily: 'JiangCheng');