Flutter初体验

• 在个人iPhone 8上，列表滑动仍是比较卡的。
• 用VS Code好像代码提示不够智能。
• 嵌套是真的醉了。

开发环境搭建

这里介绍的是Mac平台下的开发环境搭建，使用的IDE是VS Code。若是你使用的是Windows或Linux，能够查看Flutter中文网上的介绍。

安装Flutter

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户须要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户须要设置
export PATH=`pwd`/flutter/bin:$PATH
复制代码

上面在命令行中设置的环境变量，只是针对当前的会话。因此咱们须要将他们写道系统配置中。

open $HOME/.bash_profile

若是目录下不存在改文件，则手动建立一个。而后将下面的代码粘贴进去：

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户须要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户须要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
复制代码

其中PATH_TO_FLUTTER_GIT_DIRECTORY是你clone的flutter的目录，须要你本身替换掉。

运行source $HOME/.bash_profile。

注意: 若是你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

iOS设置

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
复制代码

若是你以前没有用过cocoapods，须要设置一下镜像。命令行中运行：

gem sources -l
复制代码

查看当前使用的RubyGems源。

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
复制代码

后面的--remove附带的参数将上一步查看到的源写上，而后再查看一下RubyGems源是否正确，确保以下所示：

$ gem sources -l
*** CURRENT SOURCES ***

https://gems.ruby-china.com/
复制代码

若是还有其余关于RubyGems的问题，能够到 gems.ruby-china.com/ 得到帮助。

配置VS Code

• 安装VS Code

你能够去官网下载，而后安装。这里是传送门。

• 安装Flutter插件。

打开后，点击左边侧边栏的插件按钮，搜索Flutter插件。

第一个就是 Flutter，安装 Flutter同时会安装 Dart插件，等安装完毕后，再 reload一下就能够了。

第一个Flutter工程

打开你的VS Code，View->Command Palette，输入flutter并选择Flutter: New Project，输入一个工程名，就叫hello_flutter吧。

名称只能是小写字母和下划线，是否是很变态啊。

回车后选择一个目录，工程就建立好了。

在VS Code下方的输出区域，给咱们提供了TERMINAL功能，链接你的手机，在TERMINAL中敲下flutter run，就会看到正在编译了。完成后，就能在手机上看到你的第一个flutter应用了。

这里须要先配置Xcode以及证书相关。

至此，你就能够开启你的flutter之旅了。你能够按照这篇文章来修改你的工程，建立一个列表来体验。

参考文章

1. Flutter中文网
2. Flutter不同的跨平台解决方案

你也能够关注个人公众号，获取更多文章。