Flutter环境配置

xiaohai 2021-08-10 14:56:17 243人围观 标签: Flutter 
简介Windows上搭建Flutter环境

Windows上搭建Flutter环境

       笔者主要使用的Windows系统,所以这里主要介绍Windows环境下的安装,相关Mac安装,可以搜索下相关安装方式,也非常的简单,就不在这里赘述了。本届主要来自于Flutter中文网,读者可以自行去上面查找相关内容。

一、系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
  • 工具: Flutter 依赖下面这些命令行工具.
    • Git for Windows (Git命令行工具)

      如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。如果是32位的Windows系统,请将Program Files换成Program File (X86)

二、获取Flutter SDK

1、去flutter官网下载其最新可用的安装包,点击下载

注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包。地址为:https://github.com/flutter/flutter/releases

2、将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。

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

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

三、更新环境变量

如果你想在Windows系统自带命令行(而不是)运行flutter命令,需要添加以下环境变量到用户PATH:

转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
在“用户变量”下检查是否有名为“Path”的条目:
============>如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
============>如果该条目不存在,创建一个新用户变量 Path ,然后将 flutter\bin 的全路径作为它的值.

重启Windows以应用此更改.

四、运行 flutter doctor

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:

C:\Users\xxxx>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.706], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    X Android license status unknown.
[√] Android Studio (version 3.2)
[!] IntelliJ IDEA Ultimate Edition (version 2017.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

该命令检查你的环境并在命令行窗口中显示报告。Dart SDK已经在打包在Flutter SDK里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。

第一次运行flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。缺失的依赖需要安装一下,安装完成后再运行flutter doctor命令来验证是否安装成功。

五、Flutter升级

Flutter SDK有多个分支,如beta、dev、master、stable,其中stable分支为稳定分支,dev和master为开发分支,安装flutter后,你可以运行flutter channel查看所有分支,如笔者本地运行后,结果如下:

C:\Users\xxxxxx>flutter channel
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Flutter channels:
  beta
  dev
  master
* stable

带”*”号的分支即你本地的Flutter SDK 跟踪的分支,要切换分支,可以使用flutter channel beta 或 flutter channel master,Flutter官方建议跟踪稳定分支,但你也可以跟踪master分支,这样可以查看最新的变化,但这样稳定性要低的多.

六、升级Flutter SDK和依赖包

要升级flutter sdk,只需如下命令:

C:\Users\xxxxxx>flutter upgrade

该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包(不包括Flutter SDK),可以使用如下命令:

flutter packages get获取项目所有的依赖包。

flutter packages upgrade 获取项目所有依赖包的最新版本。

七、IDE配置与使用

      理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序。 不过,Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件,通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能,可以帮助我们极大的提高开发效率。下面我们主要介绍VS编辑器的使用。

VS Code是一个轻量级编辑器,支持Flutter运行和调试。

安装flutter插件
  • 启动 VS Code。
  • 调用 View>Command Palette…。
  • 输入 ‘install’, 然后选择 Extensions: Install Extension action。
  • 在搜索框输入 flutter ,在搜索结果列表中选择 ‘Flutter’, 然后点击 Install。
  • 选择 ‘OK’ 重新启动 VS Code。
  • 验证配置
    • 调用 View>Command Palette…
    • 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
    • 查看“OUTPUT”窗口中的输出是否有问题
创建Flutter应用
  • 启动 VS Code
  • 调用 View>Command Palette…
  • 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
  • 输入 Project 名称 (如myapp), 然后按回车键
  • 指定放置项目的位置,然后按蓝色的确定按钮
  • 等待项目创建继续,并显示main.dart文件
体验热重载
  • 打开lib/main.dart文件。
  • 将字符串 ‘You have pushed the button this many times:’ 更改为 ‘You have clicked the * button this many times:’。
  • 不要按“停止”按钮; 让您的应用继续运行。
  • 要查看您的更改,请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮)。

你会立即在运行的应用程序中看到更新的字符串。

八、连接设备运行Flutter应用

Window下只支持为Android设备构建并运行Flutter应用,而macOS同时支持iOS和Android设备。下面只介绍如何连接Android设备来运行flutter应用。

连接Android模拟器

要准备在Android模拟器上运行并测试Flutter应用,请按照以下步骤操作:

  • 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
  • 选择一个设备并选择 Next。
  • 为要模拟的Android版本选择一个或多个系统印象,然后选择 Next. 建议使用 x86 或 x86_64 image .
  • 在 “Emulated Performance”下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
  • 验证AVD配置是否正确,然后选择 Finish。
  • 有关上述步骤的详细信息,请参阅 Managing AVDs.
  • 在“Android Virtual Device Manager”中,点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。
  • 运行 flutter run 启动您的设备。 连接的设备名是 Android SDK built for ,其中 platform 是芯片系列,如 x86。
连接Android真机设备

要准备在Android设备上运行并测试Flutter应用,需要Android 4.1(API level 16)或更高版本的Android设备.

  • 在Android设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
  • 使用USB将手机插入电脑。如果设备出现调试授权提示,请授权你的电脑可以访问该设备。
  • 在命令行运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
  • 运行启动你应用程序 flutter run。

默认情况下,Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果想让Flutter使用不同版本的Android SDK,则必须将该 ANDROID_HOME 环境变量设置为相应的SDK安装目录。

九、相关命令和快捷键

相关命令

flutter channel #查看相关分支
flutter upgrade #升级Flutter
flutter packages get #获取项目所有的依赖包
flutter packages upgrade #获取项目所有依赖包的最新版本
flutter run #运行项目
flutter create 项目名称 # 创建一个新的项目

快捷键

r #进行热重载
p #显示网格
o #切换模式,Android和IOS模式切换
q #退出和关闭

#

启动Debug模式,就可以在保存后直接进行热重载