Flutter 构建跨平台应用

一、简介

• 官网
• 中文
• Google的移动UI框架，快速在iOS和Android上构建高质量的原生用户界面
• 免费，开源

二、下载安装

• 下载SDK
  下载页
• 解压到需要安装的目录，配置PATH，以及国内需要的镜像（否则使用flutter packages get无法访问到资源会卡主）

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

使配置生效，执行source ~/.bash_profile，或者echo $PATH

• 运行flutter doctor检查需要安装的依赖，一般都会给出解决方案，只需要把指令拷贝下来执行即可，以及IDE所需要安装的插件（只需要关注自己用的IDE）
  部署ios 设备需要安装的

 $ brew update
 $ brew install --HEAD usbmuxd
 $ brew link usbmuxd
 $ brew install --HEAD libimobiledevice
 $ brew install ideviceinstaller ios-deploy cocoapods
 $ pod setup

安卓需要Android Studio，一般会出现版本不兼容问题，需要依照提示修复
注：brew update有时会因为被墙或速度慢卡主，需要更改镜像源

三、启动模拟器

• MAC启动应用，苹果模拟器

$ open -a Simulator

• 启动安卓模拟器，一般需要进入Android Studio，或者命令进入emulator 所在的目录下，./emulator -avd Pixel（和@name相同）启动一个叫Pixel的安卓模拟器，以下是快捷操作配置

$ vim ~/.bash_profile

本机所在的路径

image.png

##Android Virtual Device
export PATH=/Users/jony/Library/Android/sdk/tools:$PATH

使配置生效

$ source ~/.bash_profile

添加emulator所在的路径

$ emulator @foo //启动名为foo的模拟器

• 查看模拟器

$ flutter devices

image.png

四、创建并启动应用

• 创建flutter应用，使用VSC打开，可以看到所有的文件

$ flutter create flutter_app
$ cd flutter_app
$ code . 

• 在模拟器上运行

$ flutter run -d all //在所有设备上运行

运行成功就可以在模拟器上看到应用界面，一般都会提示按r热加载
直接使用VSC的start debugging（快捷键F5）方便