提高Flutter 开发效率的一些小技巧

提高Flutter 开发效率的一些小技巧

  • 本文主要讲几个在Flutter开发过程中的使用小技巧
    • 安装自动补全插件
    • 保存時自動整理代碼
    • Extract Flutter Widget (提取Flutter组件)
    • Dart 快速索引表

本文主要讲几个在Flutter开发过程中的使用小技巧

我平时做Flutter 开发都是在 Intellij 中进行,其中有许多有趣的功能可以帮助我们提高开发效率。

安装自动补全插件

我在 Intellij 中安装了 Flutter Snippets 这个插件,在 Intellij 和 Android studio的插件市场中都可以免费下载。
提高Flutter 开发效率的一些小技巧_第1张图片
有了这个插件后,Intellij 可以帮你自动补全主流widget 的代码。以下是触发自动补全各种widget 的缩写:
提高Flutter 开发效率的一些小技巧_第2张图片
原作者 Github 链接在此: link

安装完成这个插件后,Intellij 可以自动补全主流库的 import,以及主流widget 的构造代码,如下图示例:
提高Flutter 开发效率的一些小技巧_第3张图片

保存時自動整理代碼

这个算是基本操作啦,但为了防止有人忘记,在这里也提一句。在 Settings > Language & Frameworks > Flutter 中选上 "Format Code on Save"这个选项。
提高Flutter 开发效率的一些小技巧_第4张图片
这样每次保存后,intellij 会帮助你自动美化代码。

Extract Flutter Widget (提取Flutter组件)

这个功能是代码重构的神器,但它隐藏的很深,不太容易找到。

选中一个比较复杂的widget,鼠标右键进入 Refactor > Extract > Flutter Widget ,然后给这个Widget 类取一个名字。Intellij 可以自动把这块代码抽离出一个class, 方便我们重构代码。

Dart 快速索引表

为了方便初学者快速掌握Dart 中的各种语法糖,官方给出了以下的 cheatsheet 。闲暇时把这份cheat sheet多看两遍,就能掌握Dart 的主要语法了。

提高Flutter 开发效率的一些小技巧_第5张图片
提高Flutter 开发效率的一些小技巧_第6张图片
提高Flutter 开发效率的一些小技巧_第7张图片
提高Flutter 开发效率的一些小技巧_第8张图片

你可能感兴趣的:(Flutter,开发实战)