Flutter(二)之环境搭建

前言：接下来一段时间我会陆续更新一些列Flutter文字教程

更新进度： 每周至少两篇；

更新地点： 首发于公众号，次日更新于掘金、思否等地方；

更多交流： 能够添加个人微信 372623326，关注个人微博：coderwhy

但愿你们能够 帮忙转发，点击在看，给我更多的创做动力。

Hello Flutter

这个章节咱们学习如何安装Flutter，而且写第一个Flutter程序。

以后在iOS模拟器和Android模拟器上分别跑起来咱们的应用程序（以后我会讲解如何跑在真机上）。

固然，这个程序中的不少代码你可能并非特别理解，里面涉及到一些dart知识，也涉及到一些flutter的东西。这些都没有关系，咱们的目的是把这个工程跑起来，就表示你的环境是OK的。

一. 环境搭建

环境搭建有点麻烦，特别是Android环境的安装，你们耐心安装，有任何问题能够添加个人微信 372623326

1.1. 操做系统选择

不少同窗会问，学习Flutter到底使用什么操做系统呢？

学习阶段： Windows或者macOS（苹果操做系统）都是能够的

开发阶段： 通常须要使用macOS，由于咱们须要针对iOS进行调试，一般方便起见仍是选择macOS

疑问： 若是之后作Flutter开发没有macOS怎么办？

• 这个能够彻底放心，使用Flutter开发的公司必然会给你配备macOS的

Flutter能够在Windows上学习，也能够在macOS上，由于我以后的课程要进行Android和iOS的调试，因此我当前使用的环境是macOS的。

这里我再次强调，学习阶段使用Windows是没有任何问题，我以前也在Windows上写过不少Flutter的东西！

在安装的过程当中，我也会说到不少Windows安装的注意事项，你们按照步骤一步步完成便可。

1.2. 安装Flutter SDK

使用Flutter开发，首先咱们须要安装一个Flutter的SDK。

下载Flutter的SDK

来到Flutter的官网网站，选择最新稳定的Flutter SDK的版本

• 网站地址：flutter.dev/docs/develo…
• 选择本身的操做系统和最新稳定的版本（Stable版本）（我当前最新稳定的版本是1.7.8）

安装Flutter

1.解压下载好的Flutter SDK

• 这个在Windows和macOS都是同样的（选择一个本身想要安装的目录）
• 可是在macOS中，我一般会讲flutter目录拖入到应用程序中，将其看成个人一个应用（我的习惯而已）

2.配置Flutter的环境变量

• 由于咱们以后须要在命令行执行Flutter的命令，因此须要配置环境变量

macOS或者Linux系统，须要编辑~/.bash_profile文件

export PATH=$PATH:/Applications/flutter/bin
复制代码

Windows用户将所在路径添加到环境变量的Path下

• Windows环境变量修改：点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
• 找到Path，在其中添加Flutter SDK目录下bin目录

在终端中执行flutter --version，出现以下内容，说明安装flutter成功

配置镜像

flutter项目会依赖一些东西，在国内下载这些依赖会有一些慢，因此咱们能够将它们的安装源换成国内的（也就是设置国内的镜像）

macOS或者Linux操做系统，依然是编辑~/.bash_profile文件

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter
复制代码

Windows用户仍是须要修改环境变量

• Windows环境变量修改：点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
• 新建 变量 PUB_HOSTED_URL，其值为https://pub.flutter-io.cn
• 新建 变量 FLUTTER_STORAGE_BASE_URL， 其值为https://storage.flutter-io.cn

注意： 此镜像为临时镜像，并不能保证一直可用，你们能够参考详情请参考 Using Flutter in China 以得到有关镜像服务器的最新动态。

1.3. 配置iOS环境

若是想为Flutter配置iOS开发环境，须要在咱们的电脑上安装一个Xcode（此部分Windows电脑忽略）

• Xcode是苹果公司的iOS和macOS的IDE，进行过iOS开发的童鞋应该都很是熟悉

如何安装Xcode呢？ 常见的是两种

1.直接在App Store上搜索Xcode，找到安装便可

• 这种安装方式有一个缺点，安装的必定是最新版本的（固然是用最新版本的最好）
• 可是最新版本的Xcode会对macOS系统有必定的要求，因此可能还要设计到系统升级
• 若是不但愿系统升级，能够选择第二种方式

2.第二种方式是安装本身想要的Xcode的版本，须要手动去下载

• 进入developer.apple.com/download/mo…页面
• 登陆本身的Apple ID
• 在搜索框输入Xcode，回车搜索，找到各类版本Xcode下载便可

打开安装好的Xcode，可能打开速度有点慢：不着急，慢慢来

选择本身想用的iOS模拟器

打开Xcode，右上角点击Xcode - Open Developer Tools - Simulator

这个时候会打开一个默认的iOS模拟器，也能够在Hardware - Device - 系统版本中选择本身想要测试的模拟器

这个时候，咱们就能看到以下模拟器了

这个时候咱们执行一下以下终端命令：

flutter doctor
复制代码

看到以下有一个

1.4. 配置Android环境

若是想为Flutter配置Android开发环境，须要在咱们的电脑上安装一个Android Studio

• Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。

Android Studio的下载

• 官网地址：developer.android.com/studio/?utm…
• 直接在官方下载便可
• 安装直接双击安装便可

Android的环境配置

打开Android Studio，会问咱们是否要设置代理，这是由于下载Android SDK等在国内很差下载

• 至于如何设置代理，这里就再也不讲解了~~~
• 最好要设置代理哦，否则估计会被气死~~~

以后各类下一步，就会帮咱们安装SDK等相关须要使用的内容

安装好后，点击Finish便可。

建立Android模拟器

安装好后，咱们就能够去建立模拟器：选择Configure - AVD Manger

选择create virtual device

选择一个你想用的设备

选择Android的版本（这里我没有选择Q版本，它目前仍是一个bata版本），点击download

• 下一个界面，点击accept - next就能够了

接着下一步，给本身的模拟器起个名字

启动Android模拟器

这个时候咱们执行一下以下终端命令：

flutter doctor
复制代码

看到以下有两个可用的设备

1.5. 开发工具的选择

官方推荐两个工具来开发Flutter：Android Studio 和 VSCode，咱们选择哪个呢？

对于有选择恐惧症的人，还真不是特别好选择，因此下面我会分别说出它们的优缺点，选择权在你

最后我也会给出个人选择

VSCode优缺点

VSCode是最近很是很是流行的开发工具，而且很是好用！（我以前在微博感慨微软的东西最近两年愈来愈好用，其中之一就是VSCode）

并且VSCode最近已经有取代WebStorm做为前端首选开发工具的趋势了

VSCode的优势：

• VSCode其实并不能称之为是一个IDE，它只是一个编辑器而已。
• 因此它很是的轻量级，不会占用你很是大的内存消耗，并且启动速度等都很是快，对于电脑配置不是特别高的同窗，确定是一个很是好的选择。
• 而且你能够在VSCode上安装各类各样的插件来知足本身的开发需求。

VSCode的缺点：

• 不少Android Studio包括的方便操做没有，好比点击启动、热更新点击等；
• 并且在某些状况下会出现一些问题；
• 好比以前我在使用的过程当中，有时候热更新不及时经常看不到效果，必须重启；
• 好比某些状况下，没有代码提示不够灵敏；

使用须知：

使用VSCode开发Flutter咱们须要安装两个插件：Flutter和Dart

Android Studio优缺点

对于进行过Android开发或者使用过Webstorm、IDEA、PHPStorm等的同窗，使用Android Studio确定是没有任何问题的

Android Studio的优势：

• 集成开发环境（IDE）不用多说，你须要的功能基本都有
• 并且上面说的VSCode存在的问题，在Android Studio中基本不会出现

Android Studio的缺点：

• 一个字：重
• 不管是IDE自己，仍是使用Android Studio启动项目，都会相对慢一些
• 占据的计算机资源也不少，因此电脑配置较低是会出现卡顿

使用须知：

使用Android Studio开发Flutter咱们须要安装两个插件：Flutter和Dart

个人选择

其实在两个之间到底如何选择对于童鞋们学习Flutter更好，我也是纠结了好久。

• 在我以前使用Flutter的过程当中（写这个教程以前），我使用的都是VSCode。
• 可是对于初学者来讲，学习Flutter的过程当中，Android Studio会更加友好。
• 若是以后出视频教程，我能够设立一个投票，让你们决定使用的开发工具。

不过，不管使用哪一个工具，都只是辅助而已，重要的仍是咱们课程的内容。

那么，我是如何选择 开发工具 呢？

• 在学习Dart语言过程当中，我选择VSCode，由于它能够直接建立一个dart文件让咱们进行学习
• 在学习Flutter过程当中，我选择Android Studio，由于各类集成使用起来更加方便（你继续使用VSCode没有任何问题）

二. Hello Flutter

接下来咱们建立本身的第一个Flutter应用程序，而且将其跑在两个模拟器上

2.1. 建立Flutter应用

有两种方式建立Flutter应用：经过终端，经过编辑器。

这里我先选择经过终端（Windows和macOS都是同样的命令）

打开终端 - 执行以下命令：

flutter create helloflutter
# 注意：后面的名称不能由特殊符号，也不能由大写
复制代码

2.2. 项目跑在模拟器

经过一个你喜欢的开发工具打开（我这里暂时选择Android Studio）

选择你要启动的设备，点击 运行 按钮：

我把项目运行在了两个模拟器上

2.3. 体验Flutter热重载

对于咱们开发测试阶段，若是每次修改代码都须要从新编译整个项目再加载的话，那每次可能都须要花费10秒左右甚至是几分钟的时间（电脑太慢的话），这样的开发效率是很是低的。

如今前端开发都支持热重载（Hot Reload），能够大大加快咱们的开发效率。

• 热重载能够在无需从新编译代码、从新启动应用程序的状况下，看到修改后界面的效果

Flutter在开发阶段使用JIT编译模式（后面我会讲解什么是JIT模式），因此能够作到热重载来提升咱们的开发效率

下面咱们体会一下热重载，后面有时间咱们来分析热重载是如何实现的

将下面红框中的内容改为Hello Flutter，保存一下应用程序

• 你会发如今不到1秒钟内，界面直接发生了刷新
• 而且没有应用程序没有进行任何的从新，效率很是高

若是热重载不起做用，咱们也能够点击右上角的 Hot Restart，并不须要从新运行项目

2.4. 工程目录分析

Flutter工程建立完毕会，会感受比较复杂，咱们来看下图：

目录包含哪些东西呢？

• 其中包含Flutter开发和测试须要的lib、test，在开发过程当中，咱们主要使用的就是lib目录
• 另一些是管理项目的配置文件信息等，固然也包括一些Git相关的文件
• 除此以外，还包括一个Android子工程和iOS子工程

为何包含Android子工程和iOS子工程呢？

• 这是由于做为一个跨平台的开发方案，最终仍是要嵌入到Android工程或者iOS工程中来运行的
• 而且在开发过程当中也须要调用原生的一些功能

备注：全部内容首发于公众号，以后除了Flutter也会更新其余技术文章，TypeScript、React、Node、数据结构与算法等等，也会更新一些本身的学习心得等，欢迎你们关注