跨平台flutter- window与Android Studio环境配置

背景

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

• 混合开发：Flutter拥有丰富的工具和库，可以帮助您轻松地同时在iOS和Android系统中实现您的想法和创意。 如果您没有任何移动端开发体验，Flutter是一种轻松快捷的方式来构建漂亮的移动应用程序。 如果您是一位经验丰富的iOS或Android开发人员，则可以使用Flutter作为视图(View)层， 并可以使用已经用Java / ObjC / Swift完成的部分
• 快速开发：Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态
• 富有表现力，漂亮的用户界面：Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验
• 响应式框架：和一系列基础widget，轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战
• 访问本地功能和SDK：通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK
• 用于承载和编译Dart语言和Widget库的框架，将Dart编译为原生代码的SDK
• Dart语言特点面向对象，类定义，单继承，语法类似C语言，可转译为JavaScript

更多了解可到Flutter中文网

准备

windows系统，flutter-io镜像

安装

使用镜像-用户环境变量配置

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

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意： 此镜像为临时镜像，并不能保证一直可用，请随时关注Flutter中文网 以获得有关镜像服务器的最新动态。
window用户环境变量：我的电脑右键-属性-高级系统设置-高级模块下面的环境变量-新建用户变量并配置确定

系统要求

要安装并运行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系统环境变量中。

获取Flutter SDK

• 去flutter官网下载其 最新可用的安装包；

注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要，读者也可以去Flutter github项目下去下载安装包 。
有稳定版，测试版，和开发版，我们选择稳定版3.0.1下载：

• 将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。我们解压到D盘：
  

• 在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。
  
  
  这代表flutter控制台启动成功

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

上述命令为当前终端窗口临时设置PATH变量。要将Flutter永久添加到路径中，请参阅更新路径。

更新环境变量

要在终端运行 flutter 命令， 你需要添加以下环境变量到系统PATH：

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

在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也添加它们。
重启Windows以应用此更改

运行flutter doctor

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

flutter doctor

在命令提示符或PowerShell窗口中运行此命令。目前，Flutter不支持像Git Bash这样的第三方shell。
该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

例如:

[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译，所以速度会慢一些，还需耐心等待。以后再运行就会快得多。

表示flutter安装完毕，后面的错误是需要安装Android编译环境，以及需要更新Visual Studio

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

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

该flutter工具使用Google Analytics匿名报告功能使用情况统计信息和基本崩溃报告。 这些数据用于帮助改进Flutter工具。Analytics不是一运行或在运行涉及flutter config的任何命令时就发送， 因此您可以在发送任何数据之前退出分析。要禁用报告，请执行flutter config --no-analytics并显示当前设置，然后执行flutter config。 请参阅Google的隐私政策。

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

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

安装Android环境

安装Android Studio

要为Android开发Flutter应用，您可以使用Mac，Windows或Linux（64位）机器.

Flutter需要安装和配置Android Studio:

• 由于AndroidStudio是国外的没有直接访问会有一些问题，以下为中文网下载地址，下载并安装 Android Studio根据个人设备配置下载.
  
• 启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的，
  除了安装路径自定义自己想装的位置之外其他都点击下一步，直到Install Type选择自定义安装：
  
  然后是选择界面风格根据自己喜欢选择：

安装Sdk的时候路径可选择为与Android Studio同级新增一个文件Sdk，然后next

然后会让我们选择Android内存，默认选择即可，然后next，

进入环境安装下载，next：

然后选择接受安装协议，并finish，进入下载安装

出现这个就代表我们的AndroidStudio下载安装完毕。

Android Studio系统设置

把Android的开发环境配置到系统里面，打开高级系统设置->高级->环境变量

• 首先我们要配置系统变量，变量名ANDROID_HOME必须全部大写，变量值为Sdk的安装路径：
  
• 系统Path配置，%ANDROID_HOME%\platform-tools,这样Android才能全局使用
  
  控制台执行adb devices，是Android提供检测是否有Android设备连接的指令

adb devices

出现List of devices attached即为成功。

然后再执行flutter doctor:

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [版本 10.0.19044.1706], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.1)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 2 categories.

这几个对勾表示Android Studio环境配置成功，但还有一些错误，
关于配置的错误

cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.

打开Android Studio设置，这几个tool设置一下，

然后再执行flutter doctor，看到配置的错误已经解决了

但下面是flutter未接受许可错误，许可执行：flutter doctor --android-licenses

flutter doctor --android-licenses

进入是否允许接受许可，输入 y，

连续y,直到执行出现All SDK package licenses accepted，表示许可接受完成。
然后再执行flutter doctor:

可以看出来，需要下载Visual Studio：里面有提示下载的地址：https://visualstudio.microsoft.com/downloads/
然后安装 “Desktop development with C++” ，默认安装

然后再执行flutter doctor:

 Visual Studio - develop for Windows (the doctor check crashed)
    X Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know
      about this issue at https://github.com/flutter/flutter/issues.
    X Exception: Bad UTF-8 encoding (U+FFFD; REPLACEMENT CHARACTER) found while decoding string: [
        {
          "instanceId": "3ffd25c1",
          "installDate": "2022-05-30T14:52:30Z",
          "installationName": "VisualStudio/17.2.2+32519.379",
          "installationPath": "D:\\Application\\Microsoft Visual Studio\\2022\\Community",
          "installationVersion": "17.2.32519.379",
          "productId": "Microsoft.VisualStudio.Product.Community",
          "productPath": "D:\\Application\\Microsoft Visual Studio\\2022\\Community\\Common7\\IDE\\devenv.exe",
          "state": 4294967295,
          "isComplete": true,
          "isLaunchable": true,
          "isPrerelease": false,
          "isRebootRequired": false,
          "displayName": "Visual Studio Community 2022",
          "description": "����ǿ��� IDE����ѧ��������Դ��������ߺ͸������ʹ��",
          "channelId": "VisualStudio.17.Release",
          "channelUri": "https://aka.ms/vs/17/release/channel",
          "enginePath": "C:\\Program Files (x86)\\Microsoft Visual
          Studio\\Installer\\resources\\app\\ServiceHub\\Services\\Microsoft.VisualStudio.Setup.Service",
          "installedChannelUri": "https://aka.ms/vs/17/release/channel",
          "releaseNotes": "https://docs.microsoft.com/en-us/visualstudio/releases/2022/release-notes-v17.2#17.2.2",
          "thirdPartyNotices": "https://go.microsoft.com/fwlink/?LinkId=661288",
          "updateDate": "2022-05-30T14:52:30.664144Z",
          "catalog": {
            "buildBranch": "d17.2",
            "buildVersion": "17.2.32519.379",
            "id": "VisualStudio/17.2.2+32519.379",
            "localBuild": "build-lab",
            "manifestName": "VisualStudio",
            "manifestType": "installer",
            "productDisplayVersion": "17.2.2",
            "productLine": "Dev17",
            "productLineVersion": "2022",
            "productMilestone": "RTW",
            "productMilestoneIsPreRelease": "False",
            "productName": "Visual Studio",
            "productPatchVersion": "2",
            "productPreReleaseMilestoneSuffix": "1.0",
            "productSemanticVersion": "17.2.2+32519.379",
            "requiredEngineVersion": "3.2.2148.26540"
          },
          "properties": {
            "campaignId": "2030:b339723e-f580-4215-a586-af436edb4770",
            "channelManifestId": "VisualStudio.17.Release/17.2.2+32519.379",
            "nickname": "",
            "setupEngineFilePath": "C:\\Program Files (x86)\\Microsoft Visual Studio\\Installer\\setup.exe"
          }
        }
      ]
      . The Flutter team would greatly appreciate if you could file a bug explaining exactly what you were doing when
      this happened:
      https://github.com/flutter/flutter/issues/new/choose
      The source bytes were:
      [91, 13, 10, 32, 32, 123, 13, 10, 32, 32, 32, 32, 34, 105, 110, 115, 116, 97, 110, 99, 101, 73, 100, 34, 58, 32,...]


[√] Android Studio (version 2021.1)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

意思就是VisualStudio安装程序提供的vswhere已经过时，在utf8开关上有个BUG，升级vswhere即可解决。

首先下载最新的vswhere 3.0.2可能需要VPN

找到VisualStudio安装程序的安装目录，我是C:\Program Files (x86)\Microsoft Visual Studio\Installer中vswhere.exe文件，并替换

然后再执行flutter doctor:

至此，flutter的windows环境和Android Studio环境配置完成

Android设备设置

设置Android设备

要准备在Android设备上运行并测试您的Flutter应用，您需要安装Android 4.1（API level 16）或更高版本的Android设备.

在您的设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
使用USB将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备。
在终端中，运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
运行启动您的应用程序 flutter run。
默认情况下，Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想让Flutter使用不同版本的Android SDK，则必须将该 ANDROID_HOME 环境变量设置为SDK安装目录。

设置Android模拟器-Genymotion

• Genymotion 下载地址：https://www.genymotion.com/download/
• Genymotion 对于个人免费，对于组织收费我们选择免费，我们选择带虚拟机
  
  安装的时候有个Oracle VM VirtualBox安装，也是默认必须要的，一起安装，最好默认路径安装。
  然后注册个账号，选择个人使用，并登录
  
  然后里面有各种型号的Android手机的模拟器，点击自己想要的手机型号的模拟器并下载安装：
  
  下载中：
  
  启动模拟器：
  
  然后我们的Android模拟器就完美启动了：
  

经验

• 有Android Studio中模拟器的需要系统环境变量配置名字:ANDROID_SDK_HOME
  值为avd路径

注意

环境配置过程中，更多的是要注意用户环境配置，和系统环境配置，根据流程见招拆招，绽放不一样的焰火。