Flutter配置环境、运行helloword项目

系统管理员 2022-03-07 09:46 379阅读 0赞

> 原文更新链接地址： [https://www.aiprose.com/blog/28][https_www.aiprose.com_blog_28]

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。我们将在这里揭开他可爱而神奇的面纱。

> 学习讨论QQ群：936799301

### 学习适合人群 ###

*  前端爱好者：希望升级技能，掌握全端开发的技术。
 *  Flutter从业人员：Flutter从业人员一定也可以学到很多知识。
 *  移动开发爱好者：想从事移动开发，但是还没有入门的新手。

### Flutter优势 ###

*  **跨平台：** 现在Flutter至少可以跨4种平台，甚至支持嵌入式开发。我们常用的有Linux、Android、IOS，甚至可以在谷歌最新的操作系统上Fuchsia进行运行,经过第三方扩展，甚至可以跑在MacOS和Windows上，到目前为止，Flutter算是支持平台最多的框架了，良好的跨平台性，直接带来的好处就是减少开发成本。
 *  **原生用户界面：** 它是原生的，让我们的体验更好，性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知，为您的用户带来全新的体验。（可以看一下图片，这是Flutter的表现）
 *  **开源免费：** 这个不用多说，我们只要学会并使用，这些都是免费的。这对于大公司是非常必要的，有人说你可以用破解版什么的…说明你还是小公司，我们公司的软件全部是正版，就更不用说操作系统和生产环境了，否则各种公司的侵权官司你都解决不了。

### 120fps超高性能 ###

Flutter采用GPU渲染技术，所以性能极高。

Flutter编写的应用是可以达到120fps(每秒传输帧数),这也就是说，它完全可以胜任游戏的制作。而我们常说的RN的性能只能达到60fps，这也算是Flutter的一个超高竞争力吧。官方宣称Flutter甚至会超过原生性能。

如果你想迈入移动游戏领域，学习Flutter也是一个非常好的选择。

### Flutter生态情况 ###

由于有google这样的超级公司支持和推广，Flutter虽然刚出来没有多久，但是生态还是非常好的，中国也有了大量的Flutter爱好者。

我们先来看一下Flutter的插件情况。由法国人总结了一个Flutter的插件列表，我们可以打开看一下，里边的插件非常丰富。所以完全没有必要为Flutter的生态环境而担忧。

**github地址：**[https://github.com/Solido/awesome-flutter][https_github.com_Solido_awesome-flutter]

## Flutter开发环境搭建Windows版 ##

1.JAVA环境的jdk安装

点击下载 1.8版本 jdk [https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html][https_www.oracle.com_technetwork_java_javase_downloads_jdk8-downloads-2133151.html]

下载完成之后，双击安装，下面是我的安装目录，后面要配置环境变量。

![image][]

右键 我的电脑->属性->高级系统设置-> 环境变量，先配置 `JAVA_HOME` 然后配置 `PATH`,不要配置classpath啥的，那都是过去的配置方法了。

![image][image 1]

配置好环境变量后 cmd 中输入如下命令，表示配置好了，否则重新检查配置。

![image][image 2]

2.Flutter下载配置

去官网下载Flutter安装包，下载地址:[https://flutter.io/sdk-archive/\#windows][https_flutter.io_sdk-archive_windows]

本文编写的时候，最新发布版本为1.2.1，下载后解压到不带有中文路径的文件夹下，然后配置环境变量。

![image][image 3]

配置好环境变量后，执行命令 `flutter --version` 表示配置成功

![image][image 4]

因为flutter需要联网，所以还需要配置如下环境变量 `FLUTTER_STORAGE_BASE_URL` 、 `https://storage.flutter-io.cn`

![image][image 5]

3.AndroidStudio安装与配置

国内下载地址，迅雷下载网速更佳 [http://www.android-studio.org/][http_www.android-studio.org] androidstudio 以下简称as

![image][image 6]

这个安装包是没有sdk，安装完androidstudio，打开的时候提示是否下载sdk，选择是，他会自动下载，国内下载的话，速度还是很快的。

安装好后，需要在as中安装flutter的插件，设置然后按照下图步骤搜索安装，我这已经是安装过后的 ，安装后记得重启as。

![image][image 7]

在命令行运行 flutter doctor 如果不是绿色的，表示存在问题，如图选中的这个，是开发证书的问题，执行他提示的命令就能解决问题。最后一个表示没有虚拟机，我们这里不打算用它自带的模拟器，使用genymotion，这是android开发最手欢迎的模拟器，如果有真机最好用真机。

![image][image 8]

4.配置gradle

as默认使用新一代代码构建工具gradle，新建项目的时候他会默认去在线下载，超级超级慢的，所以提前下载一个离线版的，用迅雷下载速度更佳 [http://services.gradle.org/distributions/][http_services.gradle.org_distributions] ，尽量下载最新版。

然后需要配置一下环境变量，不然你会后悔的 ： `GRADLE_HOME` 和 `GRADLE_USER_HOME`。 GRADLE\_HOME 是gradle的解压目录，GRADLE\_USER\_HOME是下载jar包的位置，默认放C盘哦。

![image][image 9]

5.安装genymotion模拟器

genymotion模拟器现在是android开发必备模拟器，启动速度快等。[http://www.genymotion.net/][http_www.genymotion.net] 注册下载免费版

然后需要在as中安装插件，请参考我的另一篇文章 [https://www.aiprose.com/blog/29][https_www.aiprose.com_blog_29]

不同android版本的模拟器，需要下载镜像文件，如果下载特别慢或者经常失败的话，请参考我的另一篇文章，快速下载镜像文件[https://www.aiprose.com/blog/30][https_www.aiprose.com_blog_30]

6.新建项目

新建项目，选择 flutter project

![image][image 10]

![image][image 11]

项目新建成功后，我们需要编译安装到模拟器或者手机上，这时候我们需要修改一下默认的maven仓库地址，记住一定要下载离线的gradle，并配置环境变量，在线下载真的是超慢超慢。

maven { url "http://maven.aliyun.com/nexus/content/groups/public/" }        jcenter()        maven { url "https://jitpack.io" }        google()

![image][image 12]

点击运行按钮，第一次有点慢，因为要下载依赖的安装包，我这里连得是真机，可以看出120fps不是吹的，特别流畅。

![image][image 13]

运行界面

![image][image 14]

## 关注 ##

如果有问题，请在下方评论，或者加群讨论 `936799301`

关注下方微信公众号，可以及时获取到各种技术的干货哦，如果你有想推荐的帖子，也可以联系我们的。

![码农笔录二维码][1240]

[https_www.aiprose.com_blog_28]: https://www.aiprose.com/blog/28
[https_github.com_Solido_awesome-flutter]: https://github.com/Solido/awesome-flutter
[https_www.oracle.com_technetwork_java_javase_downloads_jdk8-downloads-2133151.html]: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
[image]: /images/20220307/2a1ba4944728461cb91407537343e890.png
[image 1]: /images/20220307/7ffc73a6f65d4a9b82dd5ee98315a40f.png
[image 2]: /images/20220307/0b23d6379e6a41bf97ca302b356c9ab8.png
[https_flutter.io_sdk-archive_windows]: https://flutter.io/sdk-archive/#windows
[image 3]: /images/20220307/44d9bf77cebe412e94cf6fe132232bc8.png
[image 4]: /images/20220307/c4be84fd3657408b82a2ff661a43d004.png
[image 5]: /images/20220307/c997034ea8794c2d8deda6ad49c1e03b.png
[http_www.android-studio.org]: http://www.android-studio.org/
[image 6]: /images/20220307/fa2dab2efbb5486e96f24248ac25578d.png
[image 7]: /images/20220307/cefff199c9244ca99727beea6e14a755.png
[image 8]: /images/20220307/ade411e40ca0484e8dcf2eda5cb31b89.png
[http_services.gradle.org_distributions]: http://services.gradle.org/distributions/
[image 9]: /images/20220307/42def1236dfd4d54b681110fb6893e37.png
[http_www.genymotion.net]: http://www.genymotion.net/
[https_www.aiprose.com_blog_29]: https://www.aiprose.com/blog/29
[https_www.aiprose.com_blog_30]: https://www.aiprose.com/blog/30
[image 10]: /images/20220307/0dd0739ff01647eea2cf5c2b7d71c5bd.png
[image 11]: /images/20220307/e03d28ba238d494692ae9539674b881d.png
[image 12]: /images/20220307/1af3a70629f34d878696749f6fd4e989.png
[image 13]: /images/20220307/6ad2da97f1d040c4801baf11915e7308.png
[image 14]: /images/20220307/c2096e8d00e64e8dbb099431a0d44951.png
[1240]: /images/20220307/3832f18b856b4d58b3ad75238edc35ec.png