Flutter 最佳实践 - 06

原文 https://vipinvijayannair.medium.com/

前言

作者把工作中的经验这样了罗列，这是第 6 部分，持续更新。

正文

抽取正确命名

// Do not
SvgPicture.asset(
  Images.frameWhite,
  height: 13.0,
  width: 13.0,
);


// Do
final _frameIconSize = 13.0;

SvgPicture.asset(
   Images.frameWhite,
   height: _frameIconSize,
   width: _frameIconSize,
);

理解 Flutter 的约束概念

Flutter 布局有一个经验法则，每个 Flutter 应用程序开发者都需要知道: 约束减少，尺寸增加，父代设置位置。

widget 的选择不当可能导致更大的树，从而导致更大的构建时间，从而导致性能问题。

只在必要时使用软件包

当你想要加快你的构建过程时，软件包是一个很好的选择， Pub 有很多这样的软件包。尽管如此，他们可以有显着的影响，你的应用程序的性能时，他们使用没有事先研究。

Linting 语法检查

当您使用最新版本的 Flutter 创建项目时，analysis_options.yml 文件默认使用正式的 lint 规则创建。

你可浏览 https://flutter.dev/docs/perf/rendering/best-practices ，了解更多有关上述两点的详细资料，以及更多其他良好作业模式。

在构建完成后做一些事情可以提高性能

@override
void initState() {
  super.initState();

  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    doSomething();
  });
}

使用安全区 SafeArea

SafeArea widget 通过移除操作系统控件(如状态栏、底部导航按钮(如后退按钮))所需的填充来插入子部件。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SafeArea(
      child: YourWidget(),
    },
  };
}

使用 keys 来提高 Flutter 性能

这通过使用键的 Flutter 来更好地识别 widget ，从而提供了更好的性能。

// FROM
return value
   ? const SizedBox()
   : const Placeholder(),

// TO
return value
   ? const SizedBox(key: ValueKey('SizedBox'))
   : const Placeholder(key: ValueKey('Placeholder')),

----------------------------------------------

// FROM
final inner = SizedBox();
return value ? SizedBox(child: inner) : inner,

// TO
final global = GlobalKey();
final inner = SizedBox(key: global);
return value ? SizedBox(child: inner) : inner,

分析并减小应用程序的大小

在开发阶段，很容易在应用程序中使用多个包、代码和 widget 。但有时，存储所有这些数据需要很高的内存，这也降低了应用程序的性能。

Flutter 的开发工具提供了减少应用程序大小的优势。在 Gradle 的帮助下，你可以减少 Flutter 应用程序的大小来优化 Flutter 的性能。

使用 Google 推出的打包系统，您可以创建大量 Android 应用程序。应用程序包在许多方面都是有益的。这个应用程序包的一个主要特性是允许您从 Google Play Store 下载原始代码。Google Play Store 提供了与设备兼容的应用程序，并支持平台架构。

构建应用程序包

iOS:

使用图像列表 image ListView 视图时优化内存

ListView.builder(

  ...

   addAutomaticKeepAlives: false (true by default)
   addRepaintBoundaries: false (true by default)

);

精确地显示图像和图标

预缓存图像以获得更好的性能。

precacheImage(AssetImage(imagePath), context);

使用 SKSL Warmup

$ flutter run --profile --cache-sksl --purge-persistent-cache
$ flutter build apk --cache-sksl --purge-persistent-cache

如果应用程序在第一次运行时有干净的动画，然后对于相同的动画变得平滑，这可能是由于着色器编译的延迟。

不要在 List Maps 列表映射中使用引用

不要

List a = [1,2,3,4];
List b;
b = a;
a.remove(1);

print(a);  // [2,3,4]
print(b);  // [2,3,4]

因此，每当您尝试调用 list a 的任何方法时，list b 都会被自动调用。

例如 a.remove (some) ; 也将从列表 b 中删除该项;

应该

List a = [1,2,3,4];
List b;
b = jsonDecode(jsonEncode(a));

a.remove(1);
print(a);  // [2,3,4]
print(b);  // [1,2,3,4]

不惜一切代价避免绝对定位

绝对定位是构建应用程序时最糟糕的事情之一。当只为一个特定的设备编写代码时，看起来绝对定位并没有那么糟糕。然而，当你构建一个应用程序，并打算发布到各种不同的设备和操作系统上时，绝对定位可能真的会把界面搞得一团糟。尽可能使用适合屏幕大小的值，而不是绝对定位

小贴士:

减少不透明度的使用(使用渐变/动画不透明度)
避免将所有 widget 划分为方法。
将代码分割成更小的代码以获得更高的性能。
避免重新构建 widget 。

官方文档

Https://docs.flutter.dev/perf/best-practices

使用 DevTools 进行性能测试:

Https://docs.flutter.dev/development/tools/devtools/performance
Https://docs.flutter.dev/perf
Https://api.flutter.dev/flutter/widgets/statefulwidget-class.html#performance-considerations

结束语

如果本文对你有帮助，请转发让更多的朋友阅读。

也许这个操作只要你 3 秒钟，对我来说是一个激励，感谢。

祝你有一个美好的一天~

微信 ducafecat
https://wiki.ducafecat.tech
https://ducafecat.com

# Flutter 最佳实践 - 06

# 前言

# 正文

# 抽取正确命名

# 理解 Flutter 的约束概念

# widget 的选择很重要

# 只在必要时使用软件包

# Linting 语法检查

# 在构建完成后做一些事情可以提高性能

# 使用安全区 SafeArea

# 使用 keys 来提高 Flutter 性能

# 分析并减小应用程序的大小

# 使用图像列表 image ListView 视图时优化内存

# 精确地显示图像和图标

# 使用 SKSL Warmup

# 不要在 List Maps 列表映射中使用引用

# 不惜一切代价避免绝对定位

# 结束语