Flutter学习之手摸手带你搭建Flutter开发环境

站长

2023年07月28日 23:03 · 阅读数 93

Flutter简单介绍

Flutter 是 Google 开源的应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。

Flutter的几个特点：美观、快速、高效、开放。

美观：

使用Flutter内置美丽的Material Design和Cupertino widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

快速：

Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。

Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库。

高效：

Hot Reload (热重载) ，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的

开放：

Flutter 是开放的，它是一个完全开源的项目。

搭建Flutter开发环境

下载Flutter SDK

无论是MacOS还是Windows操作系统，首先都是下载Flutter SDK，直接解压即可。

配置环境变量

这里需要配置两个变量，一个Flutter环境变量，另一个是Dart的环境变量

自 Flutter 1.19.0 dev 版本开始，Flutter SDK 在 flutter 命令脚本的同级目录下增加了 dart 命令，你可以更方便地运行 Dart 命令行程序。下载 Flutter SDK 时也会下载对应版本的 Dart SDK

Windows操作系统的环境变量配置

Flutter学习之手摸手带你搭建Flutter开发环境镜像配置 fluter项目会依赖一些东西，在国内下载这些依赖会有一些慢，所以我们可以将它们的安装源换成国内的(也就是设置国内的镜像）新建变量PUB_HOSTED_URL，其值为pub.flutter-io.cn 新建变量FLUTTER_STORAGE_BASE_URL，其值为storage.flutter-io.cn

MacOS操作系统的环境变量配置

终端进入到~/.bash_profile文件
添加flutter环境变量export PATH=$PATH:/flutter目录/bin
添加dart环境变量export PATH=$PATH:/flutter目录/bin/cache/dart-sdk/bin

使用flutter --version验证

如果不生效，使用source ~/.bash_profile让这个文件在配置后立即生效

开发工具选择

在此之前先说一下模拟器的使用，我们可以使用模拟器来运行调试项目，分为ios模拟器和安卓模拟器，不是直接在电脑里面安装模拟器，而是利用开发工具，在开发工具里面创建对应的模拟器。

MacOS系统中可以使用Xcode工具，并且创建ios模拟器来调试项目；如果想调试安卓就使用Android Studio工具，使用AVD Manager创建安卓模拟器进而调试项目。
Windows系统中只能使用Android Studio工具创建安卓模拟器进而调试项目。

先创建一个Flutter项目

flutter create helloflutter

创建成功之后如果直接使用flutter run来启动项目是不会成功的，控制台显示如下信息，因为没有选择模拟器

Connected devices:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19045.3208]
Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.199
Edge (web)        • edge    • web-javascript • Microsoft Edge 114.0.1823.82
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (or "q" to quit):

Android Studio使用

这里介绍Windows系统中Android Studio工具的使用

先下载并安装Android Studio
运行 Android Studio，并进入 ‘Android Studio Setup Wizard’，这会安装最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是在开发 Android Flutter 应用时所需要的。
安装插件Flutter、Dart(依次点击：File>Settings>Plugins)

Flutter学习之手摸手带你搭建Flutter开发环境

配置flutter和dart SDK路径

Flutter学习之手摸手带你搭建Flutter开发环境

创建一个模拟器设备

Flutter学习之手摸手带你搭建Flutter开发环境 1、先选择设备定义（device definition） 2、再选择系统映像（system image）

FAQ：如果你的电脑是AMD处理器，系统映像时会有报错：Android Emulator Hypervisor Driver For AMD Processors is not installed 原因在于Android studio对于AMD R系列处理器的支持度不如intel CPU S：终端中运行systeminfo，查看固件中已启用虚拟化这一项是否开启，这里需要开启virtualization technology虚拟化技术，访问UEFI（或BIOS）进行修改

3、最后进行一些验证配置 4、finish(创建完成之后重启一下Android Studio)