Flutter开发环境搭建

系统的基本要求

  • 操作系统:必须windows7以上64位操作系统。(这个一般都能很好的满足)
  • 磁盘空间:大于3个G,虽然官方说的是400M,但是你还需要安装Android Studio 和 虚拟机,所以至少要3个G左右,如果能达到5个G就更好了(满足多个虚拟机的要求)。
  • 需要Git环境:Flutter需要git环境的支持,所以这个也要有,作为一个前端,这个是必备工具,所以我在文章中就不教大家安装了

JAVA环境的安装

既然要做原生应用了,而且是基于Android的,那还是需要我们安装一下JAVA的环境的,我比一般得到一个新系统后首先做的就是这一步。这个就相当于你按一个软件,你不用考虑太多。

JAVA环境下载地址:

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html



下载完成后进行安装,这个就直接下一步下一步就可以了。我一般都是安装到系统盘,也就是C盘。


安装完成到终端(命令行)里输入java -version,能出现下图中的结果,说明安装成功。

下载安装 FlutterSDK

  1. 去官网下载Flutter安装包,下载地址:https://flutter.io/sdk-archive/#windows (这个官方会经常改动)我选择的版本是0.9.4。

  2. 将安装包zip解压到你想安装Flutter SDK的路径(如: E:fluterflutter;注意,不要将flutter安装到需要一些高权限的路径如C:Program Files,这个没必要跟我一样,凭借自己喜好设置就好)。

  3. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

  4. 配置环境变量,Flutter的执行是要进行联网的,由于国内的原因,所以你需要设置环境变量(墙翻的好,这步可以省略.视频中有具体讲解)

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

进行Flutter doctor 的测试


在终端中输入flutter doctor,你可能会得到下面类似的结果。


Android toolchain - develop for Android devices
    • Android SDK at D:Androidsdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

这时候你得到的x比这个会多一些,因为我们还没有安装Android studio那下一步就是进行Android Studio的安装。

 

Android Studio的安装


其实前边的都是比较简单的,到这一步就开始耗时间了。因为在安装Android Studio的时候,要到google的网站下很多的包,但是谷歌被墙的厉害,所以比较耗时间,希望小伙伴可以有点耐心,一边不行就装两遍。


  1. 下载Android Studio:直接到官网进行下载就可以了。下载地址:https://developer.android.google.cn/进入后向下拉,然后看到如下界面,点击红圈处进行下载。 

  1. 安装Android Studio 软件:这个安装也就是差不多下一步下一步,如果你真的不会,给你个比较详细的教程。https://www.cnblogs.com/xiadewang/p/7820377.html,(需要注意的是,会变的很慢,它去谷歌下载了很多包,我大概下载了30分钟) 

  2. 打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。 出现上图,点中间的Search in repositories,然后点击安装。 安装完成后,你需要重新启动一下Android Studio软件。


安装Android证书


安装好Android Studio后,再次打开终端(命令行),输入flutter doctor,这时候的x会明显减少,但是你还是会遇到1-2个,其中有一个就是提示没有安装证书。安装证书只要在终端里执行下面的命令。

flutter doctor --android-licenses

然后会提示你选Y/N,不要犹豫,一律选择Y,就可以把证书安装好。(说的都是一大堆一大堆的英文,我也看不懂是啥)

到这里windows的开发环境就安装的差不多了


Flutter开发环境搭建Mac版

Flutter因为是新出的框架,所以对系统还是有一定的要求的。

  • MacOS (64-bit)
  • 磁盘空间:大于700M,如果算上Android Studio等编辑工具,尽量大于3G。
  • 命令号工具:bash、mkdir、rm、git、curl、unzip、which、brew 这些命令在都可以使用。

注意:一般你会在brew这个命令下载坑,很多mac系统都没有安装这个,你可以进行安装,因为这个和本知识关系性不大,所以我就不写流程了,如果你出现问题,直接点击链接学习安装就可以了。

学习安装brew:https://segmentfault.com/a/1190000013317511

下载Flutter SDK包

这里推荐去官网下载就好,我挂了梯子,速度并不慢。

网址:https://flutter.io/setup-macos/

进入网址后,向下拖拽一下,然后看到图片中的内容,点击红框处就可以下载了。

alt

如果你这也感觉麻烦,那可以直接点击下面的链接:

点击直接下载:https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.9.4-beta.zip

配置环境变量

压缩包下载好以后,找个位置进行解压。这个位置很重要,因为下面配置环境变量的时候要用到。比如你配置到了根目录下的app文件夹。

1.打开终端工具(这个我就不用写了吧),使用vim进行配置环境变量,命令如下:

vim ~/.bash_profile

在打开的文件里增加一行代码,意思是配置flutter命令在任何地方都可以使用。

export PATH=/app/flutter/bin:$PATH

提示:这行命令你要根据你把压缩包解压的位置来进行编写,写的是你的路径,很有可能不跟文章一样。

配置完成后,需要用source命令重新加载一下 ,具体命令如下:

source ~/.bash_profile

完成这部以后,就算我们flutter的安装工作完成了,但是这还不能进行开发。可以使用命令来检测一下,是否安装完成了。

flutter -h

检查开发环境

到上边为止,我们安装好了Flutter,但是还不具备开发环境。开发还需要很多软件和插件的支持,那到底需要哪些插件和软件那?我们可以使用Flutter为我们提供的命令来进行检查:

flutter doctor

alt

如果你英文很好,你应该可以很容易读出上面的检测结果,有很多条目都没有通过。需要我们安装检测结果一条条进行安装,直到满足开发环境。(如果有[!]x标志,表示本行检测没有通过,就需要我们设置或者安装相应的软件了。)

有可能你的Android studio也没有安装,那么你要先安装这个编辑器,安装好后,可以顺便下载Android SDK。

Android Studio下载地址:http://www.android-studio.org/

打开后选择对应的Mac版本,如下图(随着网站的改版,可能略有不同)

alt

下载Android SDK的时候,记得搭上梯子,否则你会等到天荒地老(祝君一切顺利)。

如果你有安装,那么第一步要作的是允许协议(android-licenses)。允许方法就是在终端运行如下命令:

flutter doctor --android-licenses

然后让你输入Y/N的时候,一路Y就可以了(至于啥意思,我也没仔细看,大概就和安装软件的下一步下一步是一样的,你按N是不能成功的)。

这不完成后,我们再使用flutter doctor进行检测后,会看到还是有很多x。大概如下:

  To install, run:
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ CocoaPods not installed.
    CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
    Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
    For more info, see https://flutter.io/platform-plugins
  To install:
    brew install cocoapods
    pod setup

其实大概意思就是我们需要这些软件,Flutter推荐你用brew命令进行安装。

我们可以直接在终端里输入下列命令(每输完一个都要等一会,等待软件包安装完成)

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

安装完这些,我大概花了1个半小时左右,我这是百兆光纤还加了梯子。

这个大问题解决以后,我们还需要为Android Studio安装一下Flutter插件(这个有可能你安装过,如果出现下面的提示,说明你还没有安装)

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.

打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。

alt

出现上图,点中间的Search in repositories,然后点击安装。

alt

安装完成后,你需要重新启动一下Android Studio软件。

我做到这里环境就全部OK了,只有一个没有找到调试设备了,因为我没有调试的手机硬件,所以出现这个提示,不用管它。

[!] Connected devices
    ! No devices available

Pub源的配置

如果你没有梯子,一个人人都知道的原因,你还需要在环境变量里配置一下Pub源,不然你是无法进行使用的。

运行:

vim ~/.bash_profile

增加两行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

重新加载环境变量

source ~/.bash_profile

希望大家都能安装成功,这只是我的安装过程,不敢保证全部正确,但是我尽量详细的描述了我Mac的搭建过程,希望可以帮助到Flutter的爱好者。



原文地址:https://www.cnblogs.com/songfengyang/p/14067900.html