1、Flutter移动端App实战教程【环境配置、模拟器配置】_flutter app

一、概述

Flutter是Google用以帮助开发者在IOS和Android
两个平台开发高质量原生UI的移动SDK，一份代码可以同时生成IOS和Android两个高性能、高保真的应用程序。

二、渲染机制

之所以说Flutter能够达到可以媲美甚至超越原生的体验，主要在于其拥有高性能的图形渲染能力，首先对比下Flutter和原生Android及其他跨平台框架（如RN）的渲染机制，如下图：

• Android原生App在绘图的时候，首先调用Android Framework的java代码，然后调用Skia(c/++)绘图引擎， 最终生成CPU/GPU指令在设备完成渲染；
• Flutter在绘图的时候，首页调用Flutter Framework的Dart代码，然后直接调用Skia(c/++)绘图引擎， 最终生成CPU/GPU指令在设备渲染；
• 其他跨平台框架（如RN）首先调用其框架的javaScript代码，然后调用Android Framework的java代码，比原生的多了一层，显然RN肯定不如原生。

由此可见，Flutter和Android原生，只要Flutter Framework的Dart代码的效率可以媲美Android Framework的java代码，就可以理解为Flutter app达到媲美原生的性能体验。

另外Flutter使用的Skia渲染引擎，是Flutter sdk的一部分，会随着Flutter sdk升级而升级，而原生的skia渲染引擎则需要跟随Android操作系统的升级而得以升级，因此对于skia引擎的性能提升，会更及时的影响到Flutter App上。

三、环境配置

1. 下载Flutter SDK

2. 更新环境变量，添加FLUTTRE_HOME变量，值为flutter安装包所处的位置，并在PATH中添加%FLUTTER_HOME%\bin

3. 运行fluuter doctor，检测尚未安装的软件，打【X】的表示需要安装。

4. 安装 Android Studio，安装过程中会自动安装Android SDK。（步骤7也是在此IDE中完成）

5. 打开file>settings，安装Dart、Flutter插件
   
   

6. 进入命令行执照授权： flutter doctor --android-licenses

7. 打开file>settings，进入Android SDK，安装cmmmand-line tools

   

8. 修改源，添加以下两个环境变量

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

9. 添加SDK环境变量

//新增系统变量
ANDROID_HOME=C:\Users\SC9535\AppData\Local\Android\Sdk

//新增Path
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools
%ANDROID_HOME%\emulator
1
2
3
4
5
6
7

完成上述所有配置后，再次执行flutter doctor，显示如下：

除了Visual Studio这个IDE没有安装，因为暂时不需要开发Window桌面程序，其他都已经安装成功。

四、安装模拟器

1、步骤

打开Android Studio右侧DeviceMachine ，点击Create Device创建模拟器。

选择镜像时，建议选择x86。（未安装hamx的，界面上会出现标红的安装提示，进入安装即可）

点击【Finish】

2、运行

点击上面调试按钮，启动完成后出现下面的模拟器窗口。

到这里，基础的环境和模拟器配置就都完成了。

五、其他运行模拟器的方式

1、VS Code运行模拟器

在Android Studio中创建完模拟器后，如果我们改用VS code做开发，也可以用vs code运行模拟器。

首先在VS code右下角启动模拟器；

如上选择我们在Android Studio中创建的模拟器：Nexus 5 API 30-Test。选中启动后，会出现一个没有打开任何应用的初始模拟器。

最后我们打开terminal命令行，运行flutter run命令，模拟器用会自动运行当前App，如下图：

2、命令行运行模拟器

首先需要确保环境变量中含有 ANDROID_HOME 变量

1. 查询本机有哪些模拟机可以选，使用下面的命令查询：

%ANDROID_HOME%\emulator\emulator.exe -list-avds
1

2. 启动指定的模拟器，下面是启用的Nexus_5_API_30-Test。

%ANDROID_HOME%\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_30-Test
1

然后模拟就会开始运行。

六、常见问题

1、Android Emulator Unauthorized

方法一：
抹除模拟器数据

方法二：

1. Exit all emulators
2. Delete ~/.android/adbkey and ~/.android/adbkey.pub
3. adb kill-server
4. adb devices Wipe data of AVD
5. Relaunch emulator

Android Emulator Unauthorized

---

推荐阅读：
理解Flutter UI系统
Flutter在Windows平台下的安装配置