Flutter详细的环境配置

4,646 阅读6分钟

什么是Flutter

Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。

Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

无需移动开发经验即可开始使用。应用程序是用Dart语言编写的,如果您使用过Java或JavaScript之类的语言,则该应用程序看起来很熟悉。 使用面向对象语言的经验绝对有帮助,但一些Flutter应用程序甚至是没有编程经验的人写的!

以上是官网的简单介绍,想了解更多的,可自行去Flutter 官网了解。如果想轻松理解的,可去Flutter中文网

Flutter环境配置

本文主要是Window环境下的配置,其他环境的配置可参考Flutter 官网,有MAC跟Linux的环境。

Flutter配置环境所需工具

Git

命令提示符或PowerShell

步骤

  1. 用git去clone Flutter SDK下来
git clone -b beta https://github.com/flutter/flutter.git
  1. 配置好flutter/bin的环境变量
  2. 用命令提示符或者PowerShell查看是否需要安装任何依赖项。
 flutter doctor
  1. Android Studio或者IntelliJ IDEA选择一种IDE,安装Flutter插件和Dart插件

  2. 结束!!!

这5个步骤真的很简单,Google每次的新东西都是表面笑嘻嘻...

上述的步骤其实是我精简下来,主体就是把上面的步骤执行完就可以运行了。但是官网文档在写的时候会把一些注意项放到另外的位置,或者是藏得有点深。所以会踩到很多坑。下面来说一下,我踩的坑

步骤一出现的坑位

如果你们是去看官网文档的步骤,你会发现第一步其实是

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH

注意: 由于一些flutter命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。 上面的PUB_HOSTED_URLFLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。详情请参考 Using Flutter in China

哇!看到上面的注释,第一次感觉到Google对我们的照顾。

这里有两个坑

1、这个命令是在git命令窗打的(这不是废话)

由于本人不是很熟悉命令提示符的所有命令,一开始以为export是git上(先入为主)。等到上面命令复制执行完,正常情况能够拉取到代码(如果对github网络有限制的,就会失败)。

2、export最好不要在git命令窗执行

export其实是对这次执行指定一个临时地址,因为flutter不支持在git的命令窗执行。。。(这里我感到google深深的恶意),在 Using Flutter in China这个网址有详细的说明,并且有正确的执行顺序

步骤三出现的坑

第三步的坑是由第一步的不当操作引起的,第三步的操作需要在命令提示符或者powerShell上执行。这里的最大的坑是下载各种依赖的网络问题以及显示问题。网络问题无非就是上面的配置是否生效了,多检查几下就能确保。显示的问题就是个很无语的,在下载过程,可能个别项是在正常下载,但是界面会一直卡在那里,其实后面一直在下载,只是你不知道进度,而且下载速度也很慢。

显示的问题,我自己的解决方案是,重新打开执行命令,就可以了。淡淡的忧伤。如果有更好的方案,请告知下。谢谢!

个别情况下,命令窗会出现符号乱码,这里的解决方案是右键窗口,点击属性,修改字体为除了点阵字体即可。

命令窗出现符号乱码

步骤一的正确操作

打开git命令窗,执行下面命令,然后关掉,以后都没它的事了。

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

配置用户环境变量(这两个不用系统环境变量)

PUB_HOSTED_URL:https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn

Google还提供另外一个镜像地址(个人体验还蛮快的)

FLUTTER_STORAGE_BASE_URL: mirrors.sjtug.sjtu.edu.cn/

PUB_HOSTED_URL: <https://dart-pub.mirrors.sjtug.sjtu.edu.cn/

配置系统环境变量Flutter

把你的Flutter\bin的地址添加进去

然后步骤二、步骤三执行下去,最终看到下面的输出就完成,Flutter的环境配置了

Flutter配置成功截图

上图有6个√,其中3项是IDE的,这三个很容易弄,没啥坑。

第一个√,只要Flutter SDK的各项依赖下载好,基本也就OK了。

第二个√,跟你的Android SDK版本相关,如果你的Android SDK路径是自定义的路径的,需要配置一个系统环境变量ANDROID_HOME,值为SDK的地址。这里还有另外的问题,就是你的SDK最高版本的包里面不能为空,不然第二个√是不通过,不通过会出现下面截图的问题

SDK版本不对问题
Android Studio出现无法定位设备问题

解决方案就是把空的文件夹删除掉,像我的Android-27这个文件夹下其实是空的。

其实最简单的是

直接去别人处拷贝一份Flutter SDK 并且是下载好各种依赖项的包

秒好!!!

IDE配置

我这边使用的是Android Studio,IDE的配置只是安装两个插件FlutterDart,一般Dart已经安装好了,所以只需要安装好Flutter插件即可。安装好后,重启完成。

体验Flutter的Hello World

File->new->New Flutter Project

按照创建步骤一个一个点下去,第一次创建会有点卡顿,后期Google应该会优化好点,等OK了就点击Run,第一个Flutter应用程序就好了

HelloWord

不过,这个程序在启动时候会出现白屏,时间大概有1~2秒,不是很能接受。不过,才出来也能接受了,毕竟热重载的功能还是比较爽的。

好了,本篇Flutter配置到此结束,后面会出一篇更实用的Flutter文章。

附工具下载链接

Git for Windows (Git命令行工具)

如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令

PowerShell最好是5.0的版本,才能比较好地支持Flutter。

如果读者不想用命令提示符的话,使用PowerShell的话,以下有几点需要注意下

Win 7 自带的PowerShell 2.0的,win 10自带的powerShell 5.0 。如果win 7 的读者想升级版本的话,这里PowerShell官网下载地址