Flutter 项目中管理你的 Assets Texts Widgets

Posted 2022-12-12 会煮咖啡的猫咪

Flutter 项目中管理你的 Assets Texts Widgets

原文 https://medium.com/@mustafatahirhussein/managing-your-assets-texts-and-widgets-professionally-a-must-read-flutter-guide-ffb93b19eff0

前言

这篇文章是 Mustafa Tahir 写的关于 Flutter 项目管理的技巧，可以看得出也确实是开发中出现的业务需求，让我们开始吧。

正文

Assets 资源管理

无论应用程序是小型的、中型的还是企业级的，确保它包含相关的 Assets 都是一项方便的任务。因此，我们需要处理它的方式，如果它得到转移到其他开发人员，他/她也可以轻松地管理它。

这应该是 Assets 结构

assets/
 logo/
 avatars/
 components/
 icons/

注意: 它可能因项目而异，但是需要根据结构进行分离。

我们要怎么利用它？

• 错误方式

dart file "a.dart"
Image.asset("assets/icons/a.png"),
dart file "b.dart"
Image.asset("assets/icons/a.png"),

• 正确方式

dart file "image_assets.dart"
class ImageAssets 
 static const String fb = "assets/icons/fb.png";
 static const String ig = "assets/icons/ig.png";

dart file "a.dart"
Image.asset(ImageAssets.fb),
dart file "b.dart"
Image.asset(ImageAssets.ig),

你看，这有多简单，代码也干净多了。

现在，让我们对 「Texts」 也这样做。

管理文字 Texts

让我们加快一点速度，“不要再草草记下整个段落”。

如果我们的项目具有本地化功能，那么就必须专业地使用文本，否则它将成为大多数开发人员的头痛。

dart file "a.dart"
Text("some text"),
dart file "b.dart"
Text("some text"),
dart file "c.dart"
Text("some text"),

• 正确的方法。

dart file "image_assets.dart"
class Strings 
 static const String appTitle = "e-comm App";
 static const String appDesc = "Lorem Ipsum";

dart file "a.dart"
Text(Strings.Strings),
dart file "b.dart"
Text(Strings.appDesc),

就这么简单。

现在，让我们用更多的方法来管理我们的 Widgets。

管理 Widgets

在这里，我要向大家介绍派对的“ extension ”。

这是 Dart 2.7 版本中引入的一个特性。它的基础是相当牢固的，因为它使代码更容易阅读，甚至对新生也是如此。

下面是 extension 的代码片段

extension "name_of_extension" on "type" 
 "return_type" get => "the_type_you_want";

别担心，我通过一个例子让你明白。

这样吧

考虑到我们需要从 Flutter 内置的 DateTime 中挑选出“日期和年份”，我们将如何做到这一点。

• 第一种方法

我们可以使用包“ date_format”或“ intl”来完成工作。

• 第二种方法

我们可以通过在需要特性的页面上指定字符串拼接来处理它。

但是通过 extension ，我们可以在不影响代码质量的情况下轻松地处理它。

create a file project_extensions.dart
extension ExtendedDate on DateTime 
  String get formatted => "$day-$year";

现在，用这个:

Text(DateTime.now().formatted),

注意: 只要有日期时间，您将默认看到“格式化”。

这就是我们如何使我们的 widget 具有更好的可读性。

另外，如果我们有多个类型，比如“ . png”和“ . svg”，我们也可以使用 extension 名，特别是对于 Asset。

结束语

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

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

祝你有一个美好的一天~

---

© 猫哥

• 微信 ducafecat

• https://wiki.ducafecat.tech

• https://video.ducafecat.tech

本文由 mdnice 多平台发布