你好，学习如何安装Flutter |设置开发环境

2。调整Flutter的环境变量

• 因为后面需要从命令行执行Flutter命令，所以需要配置环境变量

对于macOS或Linux系统，需要调整你的~/.bash_profile文件

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

Windows用户，将路径添加到环境变量的Path中

• 修改Windows环境变量：点击电脑图标-属性-高级系统设置-高级-环境变量找到Path并将Flutter SDK目录添加到其中flutter项目依赖一些东西，在国内下载这些依赖会有点慢，所以我们可以将它们的安装源改为home（即安装本地镜像）

  对于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

  注： 该图片为临时图片，不保证能全部找到其中。时间。详情请参见在中国使用Flutter获取镜像服务器最新更新。

  1.3。配置iOS环境

  如果要为Flutter配置iOS开发环境，需要在我们的电脑上安装Xcode（Windows电脑忽略这部分）

  • Xcode是Apple针对iOS和macOS的IDE。做过iOS开发的小伙伴应该都熟悉这个

  **如何安装Xcode？ **常见的有两种

  1。直接在App Store中找到Xcode，搜索并安装

  • 这种安装方式有一个缺点，安装必须是最新版本（当然用最新版本的最新字就OK了）
  • 但是最新版本的Xcode会对macOS系统有一些要求，所以可能会设计更新系统
  • 如果你不想更新系统，可以选择第二种方法

  2。第二种方法是安装你想要的 Xcode 版本。需要手动下载

  • 进入developer.apple.com/download/mo...页面
  • 使用Apple ID登录
  • 在搜索框中输入Xcode并按回车进行搜索，搜索不同的版本。到Xcode并下载

  打开已安装的Xcode，打开可能有点慢：别着急，慢慢来

  选择你要使用的iOS模拟器

  打开Xcode并点击顶部Xcode 右上角 - 打开开发者工具 - 模拟器

  现在将打开默认的 iOS 模拟器。您也可以在硬件-设备-系统版本中选择您要测试的模拟器，我们按照如下：

  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以及其他相关内容

  安装完成后，点击完成。

  创建Android模拟器

  安装后，我们可以创建模拟器：选择配置-AVD Manger

  选择创建虚拟设备

  选择您不想使用的设备。这里选择Q版本，还是Bata版本），点击下载

  • 进入下一个界面，点击接受-下一步就这样了

  然后进行下一步，给模拟自己命名设备

  启动Android模拟器

  此时我们执行以下最后一条命令：

  flutter doctor
  复制代码

  看到有两个设备如下

  1.5。选择开发工具

  官方给出了两种开发Flutter的工具：Android Studio和VSCode，我们应该选择哪一个呢？

  对于有选择恐惧症的人来说，这绝对不是一个好的选择，所以下面我会讨论一下各自的优缺点。选择权是你的

  最后我也给出我的选择

  VSCode优缺点

  VSCode是最近很流行的开发工具，而且非常好用！ （之前在微博感叹微软这两年的成果越来越有用，其中也包括VSCode）

  而且VSCode最近已经取代WebStorm成为前端开发工具

  VSC的优点：

  • VSCode可以不叫IDE，它只是一个编辑器。
  • 所以它很轻，不会占用你太多的内存，而且启动速度很快。对于电脑水平不是很高的同学来说无疑是一个非常好的选择。
  • 并且您可以在VSCode中安装各种插件来满足您的开发需求。

  VSCode的缺点：

  • Android Studio中包含的很多简单的功能都缺失了，比如点击启动、点击热更新等；
  • 而且在某些情况下会出现一些问题；
  • 比如我以前使用的过程中，有时热更新不及时，往往结果不可见，必须重复；
  • 例如，在某些情况下，未编码的推文不太敏感；

  使用说明：

  使用 VSCode 创建 Flutter，我们需要安装两个插件：Flutter 和 Dart

  Android Studio 的优缺点 、IDEA、PHPStorm 等，会有使用 Android Studio 没问题

  Android Studio 的优点：

  • 不用说，集成开发环境（IDE）有你需要的所有功能
  • 而且上述 VSCode 的问题在 Android Studio 中不会表现出来

  Android Studio的缺点：

  • 一个字：重
  • 无论是IDE本身还是使用Android Studio启动项目都会很慢
  • 还占用大量的网络资源，所以如果电脑配置是低的话会有延迟。而Dart

    我的选择

    其实孩子们还是先学学Flutter如何在两者之间进行选择吧。我已经挣扎了很长时间了。 。

    • 过去使用 Flutter 时（在写本教程之前），我使用的是 VSCode。
    • 但是对于初学者来说，Android Studio在学习Flutter的过程中会更加友好。
    • 如果以后有视频教程，我可能会设立一个投票，让大家决定使用哪种开发工具。

    但是，无论您使用什么工具，它都只是一个帮助。重要的是我们的课程内容。

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

    • 在学习Dart时，我选择了VSCode，因为它可以创建实时的dart文件供我们学习
    • 在学习Flutter时，我选择Android Studio，因为它更容易使用各种插件。 （你继续使用VSCode没问题）

    2。 Hello Flutter

    然后我们创建第一个 Flutter 应用程序并在两个模拟器中运行它

    2.1。创建 Flutter 应用程序

    创建 Flutter 应用程序有两种方式：通过终端和通过编辑器。

    这里我选择使用终端（仅Windows和macOS的命令相同）

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

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

    2.2。项目正在模拟器中运行

    用你喜欢的开发工具打开它（目前我选择Android Studio）

    选择你要启动的工具，然后点击运行按钮：

    我在两个模拟器中运行了该项目

    2.3。尝试一下 Flutter 热重载

    但是在开发和测试阶段，如果我们每次更改代码都需要重新加载整个项目然后安装，那么每次大约需要 10 秒或几分钟（如果计算机太慢了）。这种类型的开发成功率很低。这。

    现在前端开发支持热重置，可以加快我们的开发性能。

    • 热重载无需重写代码或重启应用就可以看到改变界面的效果

    Flutter在开发过程中使用的是JIT编译模式（后面我会解释什么是JIT模式），所以热重载可以这样做来提高我们的开发性能

    让我们体验一下热重载。有时间我们再讨论一下如何实现热重载

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

    • 你会看到不到1秒就直接更新界面了。
    • 而且无需重载就没有应用，效率非常高

    如果无法实现热重启功能，我们可以按右上角的热重启，无需重启项目

    2.4。项目文件夹分析

    一旦创建了Flutter项目，就会比较困难。我们来看下图：

    文字里面有什么？

    • 包括 Flutter 开发和测试所需的库和测试。开发过程中，lib目录
    • 还有管理项目的配置文件信息，当然还有Git相关的文件
    • 另外还有子项目Android也有。 iOS 子项目

    为什么会有 Android 子项目和 iOS 项目？

    • 这是因为作为一个跨平台的开发方案，最终会集成到Android项目或者iOS项目中来运行
    • 并且在开发过程中还需要调用一些原生函数

    作者： coderwhy
    链接：https://juejin.im/post/5d6fb27551882554575022f5
    来源：掘金
    版权归作者所有。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。