Flutter 开发小技巧

avatar
Android @奇舞团Android团队

级别:★☆☆☆☆
标签:「Flutter 开发小技巧」「Flutter 快捷键」「Flutter插件」「Flutter代码块」
作者:ITWYW
审校: aTaller团队

前言 笔者在本文中将给大家介绍使用Visual Studio Code 开发 Flutter 项目过程中的一些小技巧。 下文中笔者提到的内容用到的缩写有VSCode、AS。 本文中,VSCode 是 Visual Studio Code 的缩写,AS 是 Android Studio 的缩写。 本文分为三部分,第一部分是 VSCode 的插件;第二部分是 VSCode 快捷键;第三部分是参考学习网址。

一、VSCode插件

1. TODO Highlight 插件

  // TODO: 后续要完成...
  // FIXME: 待修复...

TODO Highlight

2. Better Comments

BetterComments

二、VSCode 快捷键

1. 操作项目快捷键

1.1 command + shift + p

command + shift + p :可以创建项目或查看插件

command+shift+p

1.2 运行项目相关快捷键
flutter run: 运行当前连接设备
flutter run -d 设备id:运行指定设备

运行项目后:
q:终止运行
r:热重载
cmd + k :清除终端输出的信息

flutter clean :清理缓存,可用于更改代码后运行有些异常,的一种处理方式。


flutter --version : 查看 Flutter 版本
  Flutter 1.17.1 • channel stable •
  https://github.com/flutter/flutter.git
  Framework • revision f7a6a7906b (4 days ago) •
  2020-05-12 18:39:00 -0700
  Engine • revision 6bc433c6b6
  Tools • Dart 2.8.2
flutter run 的输出信息

Running Xcode build...                                                  
                                                   
 └─Compiling, linking and signing...                        22.9s
Xcode build done.                                           61.0s
Syncing files to device iPhone SE (2nd generation)...              305ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone SE (2nd generation) is available at:
http://127.0.0.1:61644/jB_NLEwxmYA=/
1.3 开发、调试相关快捷键
cmd+鼠标左键:跳转进入类、方法实现
鼠标选中在某个类或方法,按住option键:查看相应类的构造方法或方法所需参数等说明
control + '-':返回到从哪儿来的地方

fn+f5:启动调试
print(): 调试输出
debugprint():调试输出

2. Flutter 代码块

代码块快捷键

statelessW 
statefulW
build 等

相关代码块实现都是由官方 Awesome Flutter Snippets 提供的。更多代码块快捷键,可搜索 Awesome Flutter Snippets 查看详情。

2.1 statelessW
class name extends StatelessWidget {
  const name({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}
2.2 StatelessWidget
import 'package:flutter/material.dart';

StatelessWidget
2.3 statefulW

class name extends StatefulWidget {
  name({Key key}) : super(key: key);

  @override
  _nameState createState() => _nameState();
}

class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}
2.4 build
@override
  Widget build(BuildContext context) {
    return ;
  }

搜索 ext:dart 的时候出现的插件。

3. Flutter 编辑代码快捷键

shift + control + R :即可对某个 Widget 进行操作,如对某个 Widget 进行包裹一层。
option + 上↑/下↓ :可以把当前行代码和上一行/下一行代码互换位置
command + shift + p` :可以创建项目或查看插件
cmd + shift + y/cmd + j:调起控制台
cmd + option + r:选中项目的文件夹 show in finder
open . :可以打开多个终端,打开当前项目的文件夹
cmd + shift + f : 代码格式化
control + g 跳转到某一行
cmd + k + 0(数字0):收起代码
cmd + k + j:展开代码

三、参考学习网址


笔者微信:可加并拉入《aTaller技术交流群》。

笔者微信

关注我们的途径有:
aTaller(简书)
aTaller(掘金)
aTaller(微信公众号)

推荐文章:
Flutter 常用 Widget 介绍
Flutter 图片加载 Flutter 混合栈复用原理
Flutter Platform Channel 使用与源码分析
Flutter Platform View 使用及原理简析
奇舞周刊