这四个 Flutter 技巧让你的编码效率大幅提升-51CTO.COM

今天，我将向大家介绍4个非常实用的Flutter技巧，您可以立即将其应用到您的项目中。我将不会像往常那样向大家介绍任何包或扩展程序，而是一些非常简单但非常有用的技巧！

更轻松的资产管理

管理资产可能非常困难。如果您想在应用程序中多次使用图像，则必须一次又一次指定路径。但对此有一个更简单的解决方案。创建一个应用程序资产类，用于存储所有应用程序资产。现在您可以使用 AppAssets.appLogo 或 AppAssets.noConnection 轻松调用您的资产。

class AppAssets {
  static const String appLogo = 'assets/images/app_logo.png';
  static const String noConnection = 'assets/images/no_connection.png';
}
import 'app_assets.dart';

Image.asset(AppAssets.appLogo),1.
2.
3.
4.
5.
6.
7.

更便捷的导入

一开始看到并管理数千个导入项是很烦人的。这就是我将向您展示一种轻松减少导入项的方法的原因。

假设您有一个文件夹 Constants，其中有文件 app_colors.dart、app_fonts.dart、app_theme.dart、app_constants 和 app_assets.dart。

图片

在这个文件夹中，您现在需要创建一个名为 constants.dart 的新文件。

图片

您可以在此处为每个文件编写导出语句。现在您只需导入 Constants.dart 即可访问每个文件：

export 'app_colors.dart';
export 'app_fonts.dart';
export 'app_theme.dart';
export 'app_assets.dart';
export 'app_constants.dart';
import 'constants.dart';

Image.asset(AppAssets.appLogo);1.
2.
3.
4.
5.
6.
7.
8.

去除按钮的水花波纹效果

每个人都知道点击按钮时会出现的水花效果，我一点也不喜欢。

图片

所以我将向您展示如何用一行代码来消除这种效果。

为此，您需要使用 splashFactory。

InkWell(
  spalshFactory: NoSplash.splashFactory,
  child: Icon(Icons.favorite),
  onTap: () {},
)1.
2.
3.
4.
5.

PS：尽量找到一种替代方法来让用户知道他们是否点击了按钮。这不仅能提升用户体验，对于那些可能无法在屏幕上完全识别所有元素的残疾人来说也非常重要。

更易于使用的平台特定小部件

每个 Flutter 开发者可能都遇到过这样的情况：需要判断用户使用的是 iOS 还是 Android 设备。为此，你可能需要显示一个特定的 widget，比如 Switch 或 CupertinoSwitch。但是，如果我告诉你，你不需要进行查询，也不需要两个 widget，你信吗？那么，接下来我就告诉你如何做到这一点。

许多适用于 Android 和 iOS 的小部件在 Android 版本中都有 .adaptive 扩展名。例如，让我们用 .adaptive 构建一个开关：

Switch.adaptive(
  value: true,
  onChanged: () {},
),1.
2.
3.
4.

图片

好吧，这已经非常好了，但最好的还在后面：这也适用于图标。为此，您只需使用 Icons.adaptive.share 在 Android 和 iOS 上显示共享图标即可。

我不确切知道所有这些功能可用于哪些小部件，但无论如何，此功能也可用于 Slider、SwitchListTile 和 CircularProgressIndicator。

能见度小部件

使用布尔值来查询某个控件是否可见通常是这样的：

isVisible ? Text('Visible') : Container(),
// OR (Slightly better)
isVisible ? Text('Visible') : SizedBox.shrink(),1.
2.
3.

但还有一个用于此目的的小部件，称为 Visibility：

Visibility(
  visible: isVisible,
  child: Text('Visible'),
),1.
2.
3.
4.

这看起来好多了，对吧？

原文：https://tomicriedel.medium.com/these-4-flutter-hacks-will-change-how-you-code-today-d6da59a1a2cb