debug_cat 发表于 2020-8-14 21:34

Flutter 环境搭建及运行到设备上面

### 环境搭建
Windows环境搭建可以参考这个
https://www.cnblogs.com/niluiquhz/p/12632304.html

Mac搭建可以看这个
https://www.jianshu.com/p/12b3b4f4082d

搭建环境,<font color="red">大家最好开梯子</font>,保持网络很流畅,不然等待的时间会很漫长(我自己搭建Mac半个小时不到)

### 安装Android studio 版本尽量最新
安装插件:flutter(包含dart插件)

### 创建项目流程
如果上面的你都做好了,那接下来,就是创建一个flutter项目的时刻。
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c5wuADEclAAIR_5liAjo753.png)

确定插件已经安装好,并重启AS
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c5yeAUmwKAAEUnjyZQ0Q573.png)

点击之后可能会卡段一段时间,你需要耐心等待(通常第一次会很卡,不管是哪个平台)
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c51GAQF3KAAF4eCa8UDg150.png)

选择第一个

![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c52qAZEPkAAFysGRhRDw381.png)

填写名字,SDK位置如果不显示,选择你自己保存的位置。

![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c55mAAyDhAAF5h7t5_YY581.png)

app包名填写。后面需要勾选生成iOS的代码,这样以后用Xcode打开项目,就可以编译了,如果这个不勾选,后面需要自己增加的。如果你非常熟悉可以不勾选。至于是否使用Androidx和kt,自己看需求吧。

![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c6BeAbSFmAARKKMwLKks470.png)

点击finish之后,进入这个项目了,等待项目构建完成。如果构建过程中,你们遇到有什么报错,就看报错然后Google解决。如果实在搞不好,可以在群讨论。这样一个简单的flutter项目就搭建好了。现在我们需要跑一跑。

### 第一次跑会很慢,因为下载各种依赖。
<font color="red">大家最好开梯子</font>,如果没有,换国内镜像地址吧,例如阿里云的。
Android版本的效果图:
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c6RCASwA7AACQJk7xs6I418.png)

### iOS Xcode流程
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c6zuAAj3WAAJ5FKkJQRI445.png)
点击这个文件,打开到xcode。
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c61mAfXq_AAP20UtOaeM804.png)
进入之后,点击左上角的Runner。出现配置界面。这里需要我们配置自己的apple账号,然后生成一个临时签名。
![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c65eALgdsAAO0tROXVcM272.png)![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c66mAJWhfAAB9osUokCk929.png)![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c67KAfcRNAAGBrTV-tSA057.png)![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c676ATFCUAAPLTTldjDo885.png)![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c68uAQXuKAAPqknjdkmA022.png)![图片描述](https://imgs.sunofbeaches.com/group1/M00/00/26/rBsADV8c69WABKoaAAEegSdwXDI751.png)

如果你插入自己的苹果手机,上面也能识别出来,直接打到手机上面就好了。基本流程大概就是这样,到了这里,项目就运行起来了。后面就开始创建首页简单的Tab

Einsten.M 发表于 2020-8-14 21:55

感谢分享!!!:lol

平凡的无序 发表于 2020-8-14 22:49

不错的教程,学习一下

yangcg8 发表于 2020-8-15 07:19

教程讲解细致,楼主费心了,感谢楼主分享

黄三宝 发表于 2020-8-15 09:20

楼主幸苦了,讲的这么详细,我先试试windows的

debug_cat 发表于 2020-8-21 22:20

yangcg8 发表于 2020-8-15 07:19
教程讲解细致,楼主费心了,感谢楼主分享

细吗,哈哈

debug_cat 发表于 2020-8-21 22:22

黄三宝 发表于 2020-8-15 09:20
楼主幸苦了,讲的这么详细,我先试试windows的

好的呢,win的搭建也是很简单的呢。
页: [1]
查看完整版本: Flutter 环境搭建及运行到设备上面