flutter开发_让您成为更好的Flutter开发人员的6件事

flutter开发

Here is a collection of 6 small things that many developers forget or are unaware of while developing their Flutter apps but can substantially improve the development process.

这是6个小事情的集合，许多开发人员在开发Flutter应用程序时会忘记或不知道这些小事情，但可以大大改善开发过程。

小部件，小部件，小部件！ (Widgets, widgets, widgets!)

You may have probably heard that Flutter is all about widgets. Widgets here, widgets there, and so on. My first piece of advice is this:

您可能已经听说Flutter与小部件有关。 这里的小部件，那里的小部件，等等。 我的第一条建议是：

Reduce your UI elements to as many small widgets as possible.

将您的UI元素减少到尽可能多的小部件。

Let me elaborate. The two common scenarios we’d like to prevent are as follows:

让我详细说明。 我们要防止的两种常见情况如下：

1. A huge widget class with one huge build method (aka the worst imaginable case)

   具有巨大构建方法的巨大小部件类( 又名最坏的可想象情况)

2. A huge widget class with lots of build methods (better than the previous option, but still not ideal)
   具有许多构建方法的大型窗口小部件类(比上一个选项更好，但仍不理想)

The reasons why these cases cause problems during development are:

这些案例在开发过程中引起问题的原因是：

• Long classes mean a bigger cognitive overload while navigating through them which then means that developers get more tired more quickly and the possibility of introducing an error while trying to modify the code is greater.
  较长的类在浏览它们时意味着更大的认知负担，这意味着开发人员会更快地变得更疲倦，并且在尝试修改代码时引入错误的可能性更大。
• Generally creating more widgets goes in hand with the concept of increasing reusability of your code. That way you can easily change a common aspect of your app by simply modifying one widget instead of needing to change hundreds of methods each in separate classes.
  通常，创建更多的小部件与提高代码的可重用性的概念紧密相关。 这样，您只需修改一个窗口小部件即可轻松更改应用程序的公共方面，而无需在单独的类中分别更改数百种方法。

If you’re a beginner programmer, be aware that generic widgets and abstract ones will be crucial when trying to break down your UI elements into reusable widget classes.

如果您是新手程序员，请注意，在尝试将UI元素分解为可重用的小部件类时，通用小部件和抽象小部件将至关重要。

如果陈述 (If statements)

Another small optimization concerns if statements in your Flutter code. Did you know you can use them in your build methods by placing them directly in children lists like this?

另一个小优化涉及Flutter代码中的if语句。 您是否知道可以通过将它们直接放置在子级列表中来在构建方法中使用它们？

Column(
         children: [
           _buildCancelButton(),
           _buildTitle(),
           if (dataCorrect) _buildSubmitButton(),
         ],
       )

It proves to be a clean code wise way to conditionally build up your UI logic. You can also combine it together with the spread operator to conditionally append lists of widgets to a specified list. Here’s an example:

事实证明，这是一种有条理的代码明智方法，可以有条件地构建UI逻辑。 您还可以将其与传播运算符组合在一起，以有条件地将小部件列表附加到指定列表。 这是一个例子：

Column(
         children: [
           _buildTitle(),
           if (showButtons) ..._buildButtons(),
         ],
       )
 
List<Widget> _buildButtons() {
   // ...
  }

抛出一些错误 (Throw in some errors)

Some programmers are afraid of girls and some are of throwing errors in their code. Let’s focus on the latter. While developing your app you will sometimes find pathways the code could execute that have no current implementation. In that case, you should throw an error like UnimplementedError in the case a feature is not yet implemented or an UnsupportedError if the given operation is invalid.

一些程序员害怕女孩，而有些则在代码中抛出错误。 让我们专注于后者。 在开发应用程序时，有时会发现没有当前实现的代码可以执行的途径。 在这种情况下，如果尚未实现功能，则应引发类似UnimplementedError的错误；如果给定的操作无效，则应引发UnsupportedError 。

You should additionally provide an explanation for the given error in the constructor. Here’s an example of throwing an error in a switch statement used to map a string to an enum:

您还应该针对构造函数中的给定错误提供解释。 这是在将字符串映射到枚举的switch语句中引发错误的示例：

switch (status) {
     case 'AVAILABLE':
       return PromotionStatus.available;
     case 'ACTIVE':
       return PromotionStatus.active;
     case 'EXPIRED':
       return PromotionStatus.expired;
     default:
       throw UnsupportedError('Promotion status $status is not supported!');
   }

const构造函数 (const constructors)

You should use const constructors wherever possible. Why? Well.. to put it simply, it helps increase Flutter performance by telling which elements won’t change, which means Flutter doesn’t need to rebuild them.

您应该尽可能使用const构造函数。 为什么？ 好吧..简单地说，它通过告诉哪些元素不会改变来帮助提高Flutter的性能，这意味着Flutter不需要重建它们。

Here’s an easy example to illustrate the procedure. Let’s say we want to build an icon that won’t change and has a top margin of 20 that is also static. We would define the method to build the widget like this:

这是一个简单的示例来说明该过程。 假设我们要构建一个不会改变的图标，其顶部边距为20，这也是静态的。 我们将定义构建小部件的方法，如下所示：

Widget _buildIcon() {
   return Container(
     margin: const EdgeInsets.only(top: 20),
     child: const Icon(Icons.home),
   );
 }

You don’t feel like wanting to keep track of when to add the const keyword? You’re lucky because you don’t have to! Just look at the next tip below.

您不希望跟踪何时添加const关键字吗？ 您很幸运，因为您不必这样做！ 请看下面的下一个技巧。

皮棉规则 (Lint rules)

Another useful tool is using a lint package for your project. If you’re not familiar with lint, it’s just an automatic tool that analyzes source code to flag common programming errors, bugs, or stylistic mistakes. To include it in our flutter project we start by adding two packages to our pubspec.yaml file:

另一个有用的工具是为项目使用皮棉包装。 如果您不熟悉lint，它只是一个自动工具，可以分析源代码以标记常见的编程错误，错误或样式错误。 要将其包含在我们的flutter项目中，我们首先将两个包添加到pubspec.yaml文件中：

• linter — the main lint package.

  linter —主棉绒包。

• lint — contains community picked lint rules.

  皮棉 -包含社区挑选的皮棉规则。

dev_dependencies:
 flutter_test:
   sdk: flutter
 flutter_driver:
   sdk: flutter
 test:
 linter: ^0.1.116
 lint: ^1.2.0

Then we create a file called analysis_options.yaml in our root directory. There we include our community package and customize any other rules.

然后，我们在根目录中创建一个名为analysis_options.yaml的文件。 在那里，我们包括我们的社区软件包并自定义任何其他规则。

include: package:lint/analysis_options.yaml
 
analyzer:
 exclude:
   - "lib/presentation/localization/**"
 errors:
   missing_required_param: error

We can exclude certain directories from being analyzed like for example our generated localization files directories. Here we can also state that we want our missing required parameters to be reported as error preventing us from running the code.

我们可以从分析中排除某些目录，例如生成的本地化文件目录。 在这里，我们还可以声明我们希望将缺少的必需参数报告为错误，从而阻止我们运行代码。

@必需和断言 (@required & assert)

Let’s start off with an example of a constructor for a Product class which will illustrate what you should avoid while defining constructors and methods:

让我们从Product的构造函数示例开始 类 这将说明在定义构造函数和方法时应避免的事情：

const Product(
   this.id,
   this.name,
   this.description,
   this.category,
 );

First of all, if you have multiple parameters in your methods or constructors and some of them can be optional you should mostly use named parameters instead of positional ones. That way the code is more readable and it’s easier to spot an error while doing a code review.

首先，如果您的方法或构造函数中有多个参数，并且其中一些参数是可选的，则应主要使用命名参数而不是位置参数 。 这样，代码更具可读性，并且在进行代码审查时更容易发现错误。

Additionally, you should always correctly annotate your parameters using the @required keyword if they can’t be omitted. So.. let’s do this. Here’s the effect:

另外，如果不能省略参数，则应始终使用@required关键字正确注释参数。 所以..让我们这样做。 效果如下：

const Product({
   @required this.id,
   @required this.name,
   this.description,
   this.category,
 });

If you use these lint rules I’ve shared with you, the compiler will notify you with an error if you ever forget about specifying a required parameter, which is very helpful.

如果使用我与您共享的这些规则，如果您忘记指定必需的参数，编译器将向您发出错误通知，这非常有帮助。

An assertion is another element we can use to improve this code. By specifying that our required parameters can’t have the value of null, we’ll be faster notified of a potential bug in the app.

断言是我们可以用来改进此代码的另一个元素。 通过指定我们所需的参数不能具有null值，我们将更快地收到应用程序中潜在错误的通知。

const Product({
   @required this.id,
   @required this.name,
   this.description,
   this.category,
 }): assert(id != null),
     assert(name != null);

结论 (Conclusion)

I hope you found at least one of the things we’ve shared as valuable. Some of the tips might seem to be petty, but in reality, a developer’s skill set is a combination of different small details that come together to form his overall competence level.

希望您发现我们分享的至少一件有价值的东西。 一些技巧似乎有些琐碎，但实际上，开发人员的技能是不同细节的组合，这些细节共同构成了他的整体能力水平。

Deviniti is your guide to the universe of digital transformation and enterprise software. Check out who we are and what we can do on our website.

Deviniti是您进入数字转换和企业软件领域的指南。 在我们的 网站 上查看我们是谁以及我们能做什么 。

If you want to learn more Flutter tips and tricks, make sure to check out other articles available on Deviniti Technology-Driven Blog:

如果您想了解更多Flutter的技巧和窍门，请务必查看Deviniti Technology-Driven Blog上的其他文章：

• Mixins in Flutter: best use cases

  Flutter中的Mixins：最佳用例

• The best way to add custom icons to your Flutter project

  向Flutter项目中添加自定义图标的最佳方法

• Dependency injection in Flutter done the right way

  Flutter中的依赖注入以正确的方式完成

翻译自: https://medium.com/deviniti-technology-driven-blog/6-small-things-that-let-you-become-a-better-flutter-developer-2edc35bc1c5c

flutter开发