写点什么

Flutter 在各平台的安装与配置(Windows,macos,linux)【Flutter 专题 0】

作者:坚果前端
  • 2021 年 11 月 27 日
  • 本文字数:2762 字

    阅读完需:约 9 分钟

Flutter在各平台的安装与配置(Windows,macos,linux)【Flutter 专题 0】

大家好,我是坚果前端,今天给大家带来的是 Flutter 在各平台的安装与配置


在此之前给大家简单介绍一下 Flutter

Flutter 的特点

Flutter 提供了简单而简单的方法来开始构建漂亮的移动和桌面应用程序,其中包含一组丰富的材料设计和小部件。在这里,我们将讨论其用于开发移动框架的主要功能。



Flutter 的优点:

Flutter 满足开发移动应用程序的自定义需求和要求。它还提供了许多优点,如下所列。


  • 由于热重载功能,它使应用程序开发过程非常快。此功能允许我们更改或更新代码,一旦进行更改就会反映出来。

  • 它提供了使用应用程序时更流畅和无缝的滚动体验,没有太多的挂起或削减,与其他移动应用程序开发框架相比,这使得应用程序运行速度更快。

  • Flutter 减少了测试的时间和精力。众所周知,flutter 应用程序是跨平台的,因此测试人员并不总是需要在不同平台上为同一个应用程序运行相同的测试集。

  • 它具有出色的用户界面,因为它使用以设计为中心的小部件、高级开发工具、高级 API 以及更多功能。

  • 它类似于反应式框架,开发人员无需手动更新 UI 内容。

  • 由于其快速的开发过程和跨平台性质,它适用于 MVP(最小可行产品)应用程序。

Flutter 的缺点:

我们在前面已经看到 Flutter 有很多优点,但它也包含一些缺点,下面给出。


  • Flutter 是一种相对较新的语言,需要通过脚本的维护来持续集成支持。

  • 它提供对 SDK 库的非常有限的访问。这意味着开发人员没有很多功能来创建移动应用程序。此类功能需要由 Flutter 开发人员自己开发。

  • Flutter 应用程序不支持浏览器。它仅支持 Android 和 iOS 平台。

  • 它使用 Dart 编程进行编码,因此开发人员需要学习新技术。但是,对于开发人员来说很容易学习。


好了,关于 fluttre 的简单介绍到这儿就结束了,接下来让我们开始配置 flutter 环境


Windows 环境安装 Flutter

Windows 系统要求

要在 Windows 系统上安装和运行 Flutter,您首先需要满足您的开发环境的这些要求。


安装 Flutter SDK

第一步:下载 Flutter Software Development Kit for windows 的安装包。要下载 Flutter SDK,请访问其官方网站,单击 Get started 按钮,您将看到以下屏幕。



第 2 步:接下来,要下载最新的 Flutter SDK,请单击 Windows 图标。在这里,您将找到SDK的下载链接。



第 3 步:下载完成后,解压 zip 文件并将其放置在所需的安装文件夹或位置,例如 D:\fvm\versions\2.5.1。

注意: Flutter SDK 不应该放在需要管理员权限的地方。

**第 4 步:**要在常规 Windows 控制台中运行 Flutter 命令,您需要更新系统路径以包含 flutter bin 目录。执行此操作需要执行以下步骤:


**步骤 4.1:**转到 MyComputer 属性 -> 高级选项卡 -> 环境变量。您将看到以下屏幕。






我的是 2.5.1,懒得升了,大家用 2.5.3 的



Step 4.2: -> click on edit. The following screen appears.


**步骤 4.3:**在上面的窗口中,点击新建->变量值中 Flutter bin 文件夹的写入路径->确定->确定->确定。


**第 5 步:**现在,运行 $ flutter doctor 命令。此命令检查 Flutter 应用程序开发的所有要求,并显示 Flutter 安装状态报告。



**第 6 步:**当您运行上述命令时,它将分析系统并显示其报告,如下图所示。在这里,您将找到运行 Flutter 所需的所有缺失工具的详细信息,以及可用但未与设备连接的开发工具。


接下来大家就可以去安装 vscode 和 android studio 来进行开发了。


大家好,我是坚果,公众号“坚果前端”

macOS 环境安装 Flutter

macOS 的系统要求

要在 macOS 系统上安装和运行 Flutter,您首先需要满足您的开发环境的这些要求。


获取 Flutter SDK

步骤 1 下载 macOS 的 Flutter 软件开发工具包的安装包。要下载 Flutter SDK,请访问其官方网站


第 2 步下载完成后,解压缩 zip 文件并将其放置在所需的安装文件夹或位置。


将文件解压到目标路径, 比如:


$ cd ~/development$ unzip ~/Downloads/flutter_macos_2.5.2-stable.zip
复制代码


第三步要运行 Flutter 命令,需要更新系统路径以包含 flutter bin 目录。


配置 flutter 的 PATH 环境变量:


$ export PATH="$PATH:`pwd`/flutter/bin"
复制代码


第 4 步接下来,使用以下命令在当前终端窗口中启用更新的路径,然后也进行验证。


source ~/.bashrc  source $HOME/.bash_profile  echo $PATH  
复制代码


第 5 步现在,运行 $ flutter doctor 命令。此命令检查 Flutter 应用程序开发的所有要求,并显示 Flutter 安装状态报告。


$ flutter doctor  
复制代码


第六步当您运行上述命令时,它会分析系统和所有缺少的工具的详细信息,这些工具需要运行 Flutter 以及可用但未与设备连接的开发工具。


步骤 7 如果 Flutter doctor 工具报告,请安装最新的 Xcode 工具。


第八步安装最新的 Android Studio 和 SDK,如果 Flutter Doctor 工具报告了。


步骤 9 接下来,您需要设置一个 iOS 模拟器或将 iPhone 设备连接到系统以开发 iOS 应用程序。


第 10 步再次设置 android 模拟器或将 android 设备连接到系统以开发 android 应用程序。


第 11 步现在,安装 Flutter 和 Dart 插件以在 Android Studio 中构建 Flutter 应用程序。这些插件提供了创建 Flutter 应用程序的模板,提供了在 Android Studio 本身中运行和调试 Flutter 应用程序的选项。

linux 环境安装 Flutter

手动安装 Flutter

如果你没有 snapd,或者你无法使用它,那么你可以通过以下步骤安装 Flutter。


  1. 通过下载下面的安装包以获得最新 stable release 版本的 Flutter SDK:

  2. flutter_linux_2.5.2-stable.tar.xz

  3. 对于其他发布频道以及更久的构建版本,请查看 SDK 发布 页面。

  4. 将文件解压到合适的地方,例如:


   $ cd ~/development   $ tar xf ~/Downloads/flutter_linux_2.5.2-stable.tar.xz
复制代码


如果你不想安装安装包的补丁,你可以跳过步骤 1 或步骤 2,直接获取 Github 上 Flutter 仓库 的源码并执行以下命令:


   $ git clone https://github.com/flutter/flutter.git
复制代码



export PATH="$PATH:`pwd`/flutter/bin"
复制代码


你也可以按你的需要切换分支或者 tag。例如,你可以使用 stable 版本的分支:


$ git clone https://github.com/flutter/flutter.git -b stable
复制代码


flutter 工具添加到环境变量中:


$ export PATH="$PATH:`pwd`/flutter/bin"
复制代码


用这个命令添加 PATH 仅在当前的命令行视窗生效。要将 Flutter 永久添加到环境变量中,请参阅 更新您的路径



可选步骤,提前下载二进制开发文件:


flutter 工具将下载所需的平台特殊开发二进制文件。对于预下载这些工件更好的做法是(例如,在系统构建环境中,网络可能出现不通畅的问题),通过运行下面命令提前下载 iOS 和 Android 的二进制文件:


$ flutter precache
复制代码


对于这些可选的下载项,请参考 flutter help precache


你现在可以运行 Flutter 命令了!


提示


要更新已有 Flutter 版本,请参阅升级你的 Flutter

运行 flutter doctor

运行以下命令以查看是否还有缺失的依赖需要安装,你需要安装这些依赖以完成设置(要看到详细输出,请添加 -v 标识):


$ flutter doctor
复制代码



发布于: 14 小时前阅读数: 7
用户头像

坚果前端

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“坚果前端”,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
Flutter在各平台的安装与配置(Windows,macos,linux)【Flutter 专题 0】