欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

程序员文章站 2022-06-01 18:22:38
...

极速构建漂亮的原生应用

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

Flutter中文官方文档:https://flutterchina.club

 

一、下载安装Flutter SDK 

1、下载地址:https://flutter.dev/docs/development/tools/sdk/releases

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

如果实在下载不了的话,点这里:https://pan.baidu.com/s/1fqaSqL8s_NWnb7L5YBEoVA,提取码:bhgc

 

2、将下载好的安装包flutter_windows_1.22.2-stable.zip解压到你想安装Flutter SDK的目录路径(如:C:\Users\MuGuiLin\AppData\Local\Flutter 或者 C:\src\flutter 等目录, 注意不要将flutter安装到需要一些高权限的路径,如C:\Program Files\ 或 D:\Program Files (x86)\等)。

 

3、配置镜像环境变量

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

变量名;PUB_HOSTED_URL 值:https://pub.flutter-io.cn

变量名;FLUTTER_STORAGE_BASE_URL  值:https://storage.flutter-io.cn

// 注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

具体要配置方法如下: 

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

 

2、配置 Path 环境变量:

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> 找到Path -> 编辑 -> 新建

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

3、检查安装:环境变量设置完成后,重启一下电脑,然后在命令行工具中输入如下命令!

flutter doctor // 显示相关信息,就表示JDK安装配置成功

注:如果没有正确配置, 在运行flutter doctor时可能会报: where'不是内部或外部命令,也不是可运行的程序,或批处理文件。error:unable to find git in your path.等错误。

第一次运行flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在flutter doctor输出中, 如果你选择使用IDE,我们提供了,IntelliJ IDEA,Android Studio和VS Code的插件, 请参阅编辑器设置 以了解安装Flutter和Dart插件的步骤。

一旦你安装了任何缺失的依赖,再次运行flutter doctor命令来验证你是否已经正确地设置了。

效果如下:

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

 

二、安装 Android Studio

您可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。

但官方建议使用我们的插件来获得丰富的IDE体验,支持编辑,运行和调试Flutter应用程序。请参阅编辑器设置了解详细步骤

1、安装 Android Studio下载地址:https://developer.android.com/studio,下载完成后,点击安装 -> "Next"来安装选中的组件。

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

如果实在下载不了的话,点这里:https://pan.baidu.com/s/1OxHxpbH1Xi-VLP-gfTtb2A,提取码:3knc

2、安装 Android SDK:

 Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 11 (Q)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android4.1 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 11 (Q)选项,确保勾选了下面这些组件(重申你必须使用稳定的*工具,否则可能都看不到这个界面):

  • Android SDK Platform 30
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的30.0版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

 

3、配置 ANDROID_HOME 和 Path 环境变量:

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

注:在Window10系统中 SDK的默认存放路径是在下面的这个目录:

C:\Users\你的用户名\AppData\Local\Android\Sdk

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

注:你需要关闭现有的命令符提示窗口 或 重启一下电脑,然后重新打开命令行工具,这样新的环境变量才能生效。

 

三、设置Android模拟器

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

  1. 在您的机器上启用 VM acceleration .
  2. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
  3. 选择一个设备并选择 Next
  4. 为要模拟的Android版本选择一个或多个系统映像,然后选择 Next. 建议使用 x86 或 x86_64 image .
  5. 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
  6. 验证AVD配置是否正确,然后选择 Finish

    有关上述步骤的详细信息,请参阅 Managing AVDs.

  7. 在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.
  8. 运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案

 

在Windows平台上搭建Flutter环境,flutter doctor报错等解决方案