Flutter系列：1.开发环境配置

前言

Flutter是Google推出的跨平台App开发SDK，经过本身实现高性能引擎相较于RN和Weex的JS桥接方案有本质的性能优点，具体原理对比能够阅读此文移动端跨平台开发的深度解析进一步了解。

笔者做为一名iOS开发者对Flutter的高性能跨平台方案有着浓厚的兴趣，做为学习目的，打算经过实现一些简单的Demo的形式来分享本身学习的过程，但愿同你们共同交流学习，共同进步。

Flutter为何选择Dart语言

两个最主要的缘由就是Dart有2个重要的特征：JIT和AOT, 基于JIT的开发模式支持Hot Reload(热加载)，加速开发周期；AOT的编译器能够生成更加高效的ARM代码，能够快速启动并拥有可预测的生产部署性能。Learn More

开发环境

• 机器：macbookPro macOS v10.14
• Flutter SDK: flutter_macos_v0.9.4-beta
• IDE: VSCode (Xcode Version 10.0)
• 测试平台：iOS

开发环境配置

Flutter下载

点击下载sdk flutter_macos_v0.9.4-beta.zip ，其余版本 点我前往

打开命令行，解压sdk到指定路径, 例如我的用户目录下本身建立的Flutter文件夹，也能够手动解压

cd ~/Flutter
 unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip

环境变量配置

在用户根目录下打开或者新建 .bash_profile 文件，添加如下配置：

# Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Flutter/flutter/bin:$PATH

其中前2行是专为中国开发者配置的代理，第3行为添加Flutter到PATH。要求为存放'Flutter/bin'的路径，笔者的路径为'~/Flutter/flutter/bin'

执行如下命令使.bash_profile的修改生效

source $HOME/.bash_profile

打印path，验证flutter/bin是否在其中

echo $PATH

执行安装Flutter依赖

flutter doctor

不出意外，到此为止Flutter安装成功。

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

VSCode安装配置

下载最新版VSCode
点击去官网下载 解压后拖到应用程序目录便可直接运行VSCode

安装Flutter插件

选择Extensions，输入Flutter 点击Install安装，安装后须要点击Reload方可加载插件，以下图

验证Flutter

依次点击VSCode菜单栏 View->Command palette

而后输入'doctor'选择 'Flutter: Run Flutter Doctor'命令执行

建立第一个Flutter APP

命令行执行命令打开iOS模拟器

open -a Simulator

依次点击VSCode菜单栏 View->Command palette
而后输入'Flutter', 选择'Flutter: New Project' 命令执行，而后输入工程名字 'myapp' (工程名只能小写)建立第一个Flutter APP

点击Debug->Star Debugging 或者F5快捷键运行APP, (首次运行会提示选择环境，选择Dart&Flutter)
VSCode会自动编译并运行到模拟器，如图：

这是默认工程的APP, 显示一行提示文案，按钮点击次数以及一个+按钮，点击按钮后次数显示数字将不断增长。

Hot Reload

Flutter 提供热加载功能，在Debugging状态下编辑修改代码直接保存后，即可以加载相应的修改，而并不须要重启调试，大大提高开发速度。

注意：Debug模式下，启用Dart的JIT模式，故支持Hot Reload；而Release模式下，启用的是Dart的AOT模式，此模式会作一些优化故不支持Hot Reload。

修改lib/main.dart第93行提示文案为：

'You have clicked the button this many times:',

而后保存，app上的文案就会直接更新，而不须要从新编译运行。

参考

Flutter 官网配置指南