flutter开发_加快Flutter开发的提示

flutter开发

Even with all the benefits of Flutter, everything has its downsides. Flutter can either be a breeze with an ever growing supply of widgets and packages, or it can be a mess of repetitive typing and hour long games of ‘find the missing bracket’. We will go over some things to help lessen the growing pains of learning this new technology.

即使拥有Flutter的所有好处，一切都有其弊端。 Flutter可能会随着微件和程序包供应的不断增加而变得轻而易举，或者可能是一堆重复的打字和“寻找缺少的支架”的长达一小时的游戏。 我们将做一些事情来帮助减轻学习这项新技术的烦恼。

For the sake of brevity we’ll be mainly looking at what’s available for VSCode. Although other editors may be the same or have their own equivalents.

为了简洁起见，我们将主要研究VSCode可用的功能。 尽管其他编辑器可能相同或具有自己的等效项。

本地技巧 (Native Tricks)

The keybindings for these are going to differ depending on the editor, but they are available in VSCode and Android Studio.

这些键绑定将根据编辑器而有所不同，但在VSCode和Android Studio中可用。

尾随逗号 (Trailing Commas)

The simplest way to keep your code formatted is to just add a comma to the end of any line so the editor reformats it into a nested tree-like structure. I wouldn’t recommend doing this with every line since a lot of brackets and extreme nesting can sometimes be more confusing than keeping some things inline.

保持代码格式最简单的方法是在任何行的末尾添加逗号，以便编辑器将其重新格式化为嵌套的树状结构。 我不建议对每一行都执行此操作，因为很多括号和极端嵌套有时会比使某些内容保持内联更加混乱。

main.dart

main.dart

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[Row(children: <Widget>[Container(child: Center(child: Text('I\m some text'),),),],),],);
  }
}

Is reformatted to…

重新格式化为…

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              child: Center(
                child: Text('I\m some text'),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

重构工具 (Refactor Tools)

Instead of manually cutting out everything, making a widget, and pasting it back in every time you need to go back over your work, which is a lot, VSCode offers some nifty refactoring tools to handle that for you.

VSCode无需手动剪切所有内容，制作小部件并在每次需要重复工作时将其粘贴回去，这很多，VSCode提供了一些漂亮的重构工具来为您处理。

You just need to place the cursor inside the widget’s name and hit the little light bulb that will appear for more options to add a column, extract it into its own separate widget, or to remove it altogether. You can either center the cursor, right click and look for refactor, or use Ctrl+Shift+R.

您只需要将光标放在小部件的名称内，然后点击出现的小灯泡，就可以找到更多选项来添加列，将其提取到其自己的单独小部件中或完全删除。 您可以将光标居中，右键单击并查找重构，或使用Ctrl+Shift+R

查看源代码 (View Source Code)

One great way to understand how flutter works, besides the docs, is to look at the Flutter source itself. The Flutter team has created an extremely well commented codebase for everything that you use. This can be very helpful when you want to know what arguments a particular widget takes and what’s being done with them, or to just figure out why you’re getting a specific error.

除了文档以外，了解Flutter工作原理的一种好方法是查看Flutter源代码本身。 Flutter团队为您使用的所有内容创建了一个非常受好评的代码库。 当您想知道特定窗口小部件采用哪些参数以及如何对它们进行处理，或者只想弄清楚为什么会出现特定错误时，这可能会非常有用。

Just hold Ctrl and click on the widget you want to inspect.

只需按住Ctrl并单击要检查的小部件即可。

扩展名 (Extensions)

支架对着色器 (Bracket Pair Colorizer)

This will use different colors to differentiate between sets of brackets. It will save you endless amounts of frustration from having to figure out where a particular widget starts and ends.

这将使用不同的颜色来区分各组括号。 这将使您不必无休止地不必弄清楚特定窗口小部件的开始和结束位置。

Pubspec协助 (Pubspec Assist)

Gone are the days of going over to the docs, finding the dependency or latest version number you want, and copy/pasting it into your pubspec.yaml file every time you need something. Now you can use Crtl+Shift+P, activate Pubspec Assist, and just tell it what you want.

查看文档，查找所需的依赖项或最新版本号，并在每次需要时将其复制/粘贴到pubspec.yaml文件中的pubspec.yaml了。 现在，您可以使用Crtl+Shift+P ，激活Pubspec Assist，然后告诉您所需的内容。

颤动文件 (Flutter Files)

To avoid the amount of repetitive typing just for basic boilerplate, Flutter files give you some extra options when you right-click on a directory. It may give you more than you need sometimes, but it’s still much easier to trim out what you don’t need than writing everything yourself.

为了避免仅针对基本样板进行重复键入，当您右键单击目录时，Flutter文件为您提供了一些额外的选项。 它有时可以为您提供超出您所需的功能，但是与您自己编写所有内容相比，整理不需要的内容仍然要容易得多。

很棒的Flutter片段 (Awesome Flutter Snippets)

The less I have to type the happier I am. This little collection can seem like a godsend at times when you can’t remember exactly how to make a stateless widget or a build method.

我输入的快乐程度越小。 当您不记得确切地如何制作无状态小部件或构建方法时，这个小集合似乎就像是天赐之物。

For a full list of options, check out their repo.

有关选项的完整列表，请查看其回购 。

结论 (Conclusion)

While there will always be an endless supply of ways to take shortcuts and automate the repetitive tasks, hopefully this could be a helpful introduction into some of the most common.

尽管总是有无数种方法来获取捷径和自动执行重复性任务，但希望这可以对一些最常见的方法有所帮助。

翻译自: https://www.digitalocean.com/community/tutorials/flutter-tips-for-flutter-development

flutter开发