Flutter 开发笔记 1

最近flutter刚刚发出beta版本,虽然只有0.2.3 但是横向对比了所有的cross-platform方案之后,我发现flutter是目前为止极有可能超越react native 成为最优的cross-platform方案。


今天简单记下流水账, 记录下如何安装及体验hot reload.


1. download flutter_macos_v0.2.3-beta.zip 

2.unzip, cd进目录 并导出全局路径至~/.bash_profile中

如:export PATH=/Users/xxx/Desktop/flutter/bin:$PATH

3.run "flutter doctor" 

这一步相比react native体验要好一些,如果出现哪些依赖没有安装,会在terminal中罗列出来,这样就不用到处去根据错误去google了

4.接下来就是安装XCode 和 Android Studio, 因为flutter 不依赖于android/iOS SDK(只是猜测,因为flutter自带rendering engine,并表示和系统的衔接只有薄薄的一层c/c++代码,所以猜测flutter不依赖native SDK),这里之所以需要安装SDK应该是为了运行simulator/emulator.

5.安装好flutter之后,需要配置IDE.因为之前使用vscode开发react native,所以这里也使用vscode.

vscode install extension 中选择dart code

vscode自带的Command Palette中run"Flutter: Run Flutter Doctor"再次检查依赖是否完整安装

6.之后就是创建工程了

Command Palette --->run "Flutter: New Project"

输入工程名,这里需要注意:工程名必须小写

连接好device或者simulator,可以用"flutter devices" 命令来检查是否有device

然后运行 "Debug>Start Debugging"

下图就是该default demo

在vscode中修改lib/main.dart文件,如theme color 或者text, 保存之后就会看到变化。

这里和react native不同的地方是flutter默认打开了hot reload,感觉更加方便.

推荐阅读更多精彩内容