Flutter开发笔记01 - 环境搭建(Mac)

参考blog:

https://www.imooc.com/article/284328

https://www.imooc.com/article/284627

 

一、mac dart 安装以及环境配置

1、mac下dart的安装

brew tap dart-lang/dart

brew install dart            // 安装稳定版

brew install dart --devel    // 安装dev版

安装完成后

brew info dart

查看安装的路径,找到对应的路径(路径因人而异)

/usr/local/Cellar/dart/2.1.0***

打开环境变量文件

vim ~/.bash_profile

输入以下内容,也就是上面获取到的路径下的bin文件夹的路径,然后保存即可

export PATH=/usr/local/Cellar/dart/2.1.0/bin:$PATH

 

在命令行运行

dart --version

出现版本信息即已完成配置

 

二、Flutter SDK 下载


一、在Flutter官网下载安装包,转到下载页。
二、也可以去Flutter github项目下去下载安装包,转到下载页。
三、在GitHub下载源码,可以直接download zip包,也可以使用git命令行克隆,命令行如下:

git clone -b beta https://github.com/flutter/flutter.git

注意:前两种下载后,自行解压;第三种的下载地址默认路径为:/Users/用户名/flutter

镜像使用
由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中(注: 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态):
具体操作:
1.打开终端,直接输入命令vim ~/.bash_profile;
2. 在终端插入环境变量,(直接敲键盘==“i”==,进入INSERT模式);
粘贴以下代码,将镜像加入到环境变量中。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=下载的flutter文件夹路径/bin:$PATH

注意:找不到flutter文件夹路径 ,可以直接找到文件夹,打开终端,敲 “cd+空格 ,文件夹拖入终端,所显示的路径就是”

3.输入后按“esc”退出键盘输入,再敲:wq ,写入并退出。

4.执行以下代码source ~/.bash_profile(没有bash_profile的需要执行此步)
5.终端检测是flutter环境是否配置成功

flutter -h

 

 

在andriod模拟器上调试正常,但是在ios模拟器上就会报错,

Could not build the application for the simulator.
Error launching application on iPhone X.
也google了很多,但是都解决不了。

搞定了,感觉是官方的问题。
https://github.com/flutter/flutter/issues/19257
我在github提交的issue,你可以参考下。

flutter channel master

 

三、安装Xcode

 

1、APP Store中下载

2、配置Xcode命令行工具以试用新安装的Xcode版本

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

3、确保Xcode许可协议是通过打开一次Xcode或者通过命令sudo xcodebulid -license

 

四、创建Flutter简单项目,并设置iOS模拟器运行项目

Flutter开发笔记01 - 环境搭建(Mac)_第1张图片

Flutter开发笔记01 - 环境搭建(Mac)_第2张图片

Flutter开发笔记01 - 环境搭建(Mac)_第3张图片

Flutter开发笔记01 - 环境搭建(Mac)_第4张图片

Flutter开发笔记01 - 环境搭建(Mac)_第5张图片

Flutter开发笔记01 - 环境搭建(Mac)_第6张图片

五、安装Android studio

百度Android studio,在官网下载

Flutter开发笔记01 - 环境搭建(Mac)_第7张图片

Flutter开发笔记01 - 环境搭建(Mac)_第8张图片

Flutter开发笔记01 - 环境搭建(Mac)_第9张图片

六、Android studio安装Flutter和Dart插件

Flutter开发笔记01 - 环境搭建(Mac)_第10张图片

Flutter开发笔记01 - 环境搭建(Mac)_第11张图片

七、Android 真机运行

Flutter开发笔记01 - 环境搭建(Mac)_第12张图片

 

你可能感兴趣的:(Flutter,iOS,Android,Flutter开发笔记)