加快Flutter开发的技巧

即使有 Flutter 的所有优点，但一切都有其缺点。 Flutter 可以是随着不断增长的小部件和软件包供应而变得轻而易举，也可以是重复输入和长达一小时的“寻找丢失的括号”游戏的混乱。我们将回顾一些事情来帮助减轻学习这项新技术的成长痛苦。

为简洁起见，我们将主要关注 VSCode 可用的内容。尽管其他编辑器可能相同或有自己的等价物。

原生技巧

这些键绑定会因编辑器而异，但它们在 VSCode 和 Android Studio 中可用。

尾随逗号

保持代码格式化的最简单方法是在任何行的末尾添加一个逗号，以便编辑器将其重新格式化为嵌套的树状结构。我不建议对每一行都这样做，因为很多括号和极端嵌套有时比保持一些内联更令人困惑。

主要.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'),),),],),],);
  }
}

被重新格式化为…

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'),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

重构工具

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

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

查看源代码

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

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

扩展

括号对着色器

这将使用不同的颜色来区分括号组。它将为您节省无穷无尽的挫败感，因为您不必弄清楚特定小部件的开始和结束位置。

发布规范协助

翻阅文档、查找所需的依赖项或最新版本号并在每次需要时将其复制/粘贴到 pubspec.yaml 文件中的日子已经一去不复返了。现在您可以使用 Crtl+Shift+P，激活 Pubspec Assist，然后告诉它您想要什么。

颤振文件

为了避免仅针对基本样板的重复输入量，当您右键单击目录时，Flutter 文件为您提供了一些额外的选项。有时它可能会给你比你需要的更多，但删掉你不需要的东西比自己写所有东西要容易得多。

令人敬畏的颤振片段

我打字越少，我就越快乐。当您不记得确切如何制作无状态小部件或构建方法时，这个小集合有时看起来像是天赐之物。

有关选项的完整列表，请查看他们的仓库。

结论

虽然总会有无穷无尽的方法来走捷径并自动执行重复性任务，但希望这可能是对一些最常见的有用介绍。