likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 11

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)

  • 运行flutter doctor检测flutter项目配置并查看相应的版本信息，这里记录一些问题

❌Unable to locate Android SDK. 需要配置一下Android ADK的环境变量

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

重启电脑

❌cmdline-tools component is missing 未检查到 cmdline-tools工具，在SDK manager中安装

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

❌Android license status unknown. 同意 Android 协议

然后执行 flutter doctor --android-licenses ，就可以很简单地完善你的环境的配置。

❌Visual Studio not installed; this is necessary for Windows development. 安装一下Visual Studio

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

  • 项目调试 先打开一个模拟器，点击Actions按钮，打开之后运行flutter run ，项目运行成功是一个计数器案例。

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

macos开发者建议使用vscode或者Android Studio开发flutter项目，下载Xcode调试ios设备

  • 下载Xcode

  • 配置 iOS 模拟器

如果想要在 iOS 模拟器中运行和测试 Flutter 应用，先执行如下命令将模拟器打开

$ open -a Simulator

之后cd到flutter项目目录下，运行flutter run就可以将项目运行至ios模拟器中，还将为你搭建一个本地服务用于调试

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

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

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