最近公司内部掀起了一阵Flutter的热潮,我也追赶一下热潮,来玩一玩这个小东西.

语言基础

Dart传送门

开发工具

因为本人主要是开发iOS程序,所以开发工具选择了VSCode+XCode.

安装步骤(Mac系统)

翻译自官方文档:
1.下载Flutter压缩包,并解压.
2.为flutter配置path

(1)终端执行 open $HOME/.bash_profile.
(2)将export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
//简单来说就是把bin的路径复制到$PATH:后面
(3)执行 source $HOME/.bash_profile,可通过echo $PATH查看path是否设置.
(4)如果你终端用了zsh,执行 open ~/.zshrc,然后把 source $HOME/.bash_profile复制到打开的文件当中即可,
以后打开命令就可以直接使用flutter命令了

3.Run flutter doctor

 ~/ flutter doctor
// 能看到哪些依赖工具没有安装
依次执行如下命令:
// 切换到xcode的路径
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
// 打开模拟器
open -a Simulator
// 如果要运行到真机,需要下面依赖工具
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

4.创建并运行项目

// 在VSCode中我们需要安装Flutter相关sdk,打开市场搜索install即可.
// 之前下载的flutter sdk里面已经包含了dart语言包,所以无需重新安装了
// 最后一步,在某个文件夹内创建flutter app项目
flutter create my_app
cd my_app
flutter run 即可,运行之后,如果没有真机会默认选择模拟器.

5.VSCode自定义代码片段.设置这个就类似于xcode里的代码块,方便开发.
步骤一:首选项->user snippets

frc fe60a4504d7f87b172c30be3f3e6059e - [Flutter]初识flutter

步骤二:选择dart.json.

frc 742c390a2d13af9ecc6c571f3635f78f - [Flutter]初识flutter

步骤三:编写代码片段,并设置拼写前缀.

frc ae1e811eb0bcf139bbd6c93a187a5220 - [Flutter]初识flutter

完成以上步骤,相信你已经可以运行起第一个flutter app了,接下来我会对比iOS,实现一些常用的功能.
参考:
Flutter实战教程
官方指南传送门

[Flutter]初识flutter