【原创】Android Studio 创建与运行 Flutter 项目

前言

1、概要

在 MacOS 上使用 Android Studio 开发与运行 Flutter 项目还是非常方便的。这也是官方推荐的 Flutter 项目的开发 IDE 之一。

本文分享如何在 MacOS 上使用 Android Studio 创建与运行一个简单的 Flutter 项目。

2、相关环境

  • MacOS 11.0.1
  • Android Studio 4.1.1
  • flutter 1.24-candidate.11

3、注意事项

  • 另外请使用 flutter doctor 检测当前开发环境,确保开发环境没有问题

创建过程

1、创建入口

可以从 Android Studio 的主界面点击 “Create New Flutter Project”

也可以从 Android Studio 的打开项目的菜单栏,File -> New Flutter Project 进入创建 flutter 的窗口 

2、选择 flutter 的项目类型

你可以选择开发 flutter 的应用程序、插件、包、模块。常用到的开发 iOS/Android App 都是选择 “Flutter Application”

3、配置创建 flutter 项目需要的信息

Project name: 你的项目/App 的名字,必须在 Project location 目录下无重复名称。

Flutter SDK path: 这里请选择你的 flutter 安装的目录,就是到 bin 目录的上一级目录。有点类似于 JAVA_HOME 的目录。

Project location: 该项目的项目文件存放位置,这个自行选择位置即可。

Description: 项目描述,可填可不填。

Create project offline: 勾选该选项表示离线创建此项目,建议勾选。

配置完成后,点击 Next 进入下一步。

4、配置包名

配置包名称,这个与 Java 的包名比较像。一般规则就是使用倒置域名的作为包名(并不要求这种域名真实存在,只是类似域名的命名方式)

其它两项平台语言支持保持默认即可,配置好后,点击 Finish。然后等待创建项目

5、等待创建项目

此过程可能会需要几分钟时间,需要耐心等待…

如果卡这个界面超过 5 分钟,那有可能就是出问题了。解决方法就是:先强制退出 Android Studio,然后再删除 flutter sdk bin/cache 目录下的 lockfile 文件。

参考:https://blog.csdn.net/wojiaoqiaoxiaoqiao/article/details/105806943

然后删除 Project location 位置的 flutter_hello_world,再重启 Android Studio 重新创建项目。

6、创建成功

创建成功后,Android Studio 中会加载整个项目的代码结构,并自动打开 main.dart 也就是应用的入口程序。

注:使用 flutter sdk 默认创建的应用是一个计数器的程序代码,就是当我们点击应用上的一个加号时,屏幕上有一个计数器显示已经点击了多少次。

7、在 AVD 上运行

要在 AVD 上运行,请确保你已经创建了 AVD 设备,

选择一个 AVD 设备,会运行一个 Android 设备,再点击绿色三角运行,就可以运行刚刚创建的一个官方默认的计数器 Flutter App 啦~

    

8、在 iOS Simulator 上运行

点击 Open iOS Simulator,会运行一个 iPhone 设备,再点击绿色三角运行,就可以在 iOS 上运行刚刚创建的一个官方默认的计数器 Flutter App 啦~

    

9、flutter 热重载(hot reload)

flutter 支持热重载 (hot reload),就是当我们修改了代码时,运行的 Android/iOS Simulator 中的应用程序自动更新逻辑或者资源。

让开发者更方便地、更快速地进行真实运行效果演示。

在运行栏中的下方的闪电图标就是热重载的按钮。你可以点击该图标进行重新加载(Command + \),或者更新了文件内容时按 Command + s 自动重载。

注:

  • 如果运行了多个设备的应用程序,下方的运行栏选中哪个 main.dart,则哪个设备的热重载生效。即每次只对一台设备生效。
  • 热重载不会更新模拟器中程序运行的状态。比如把计数器的标题由 Hello World 改为 Hello,原来的计数 6 仍是 6 而不会重置为 0。

10、flutter 热重启(hot restart)

flutter 的热重启 (hot reload),相对于热重载(hot reload)来说最大的不同就是会重置模拟器中的程序的运行状态。

在运行栏中的下方的闪电+绿色环形箭头图标就是热重启的按钮。你可以点击该图标进行重新启动(Command + Shift + \),或者更新了文件内容时按 Command + S 自动重载。

注:

  • 与热重载一样,热重启每次只对一台设备生效。
  • 这里的重新启动只是重置应用的运行状态,不会重启运行应用的模拟器。
  • 这里我将 _incrementCounter 方法中的 _counter ++ 改为了 _counter += 2,然后再使用热重启。会发现计数器的数量置为 0 了,且按一下 + 按钮每次就加 2 了…

11、使用开发者工具(debug 模式)

flutter 同样支持 debug 模式,而且思路与 React Native 比较接近,你可以在运行窗口下方点击最右侧的 “Open DevTools”,然后会打开一个 Debug 的浏览器窗口,你可以在这个窗口中进行 Debug 等相关的操作。

flutter 提供了非常丰富的开发者工具,本文不做详细的介绍。

总结

以上便是在 MacOS 上使用 Android Studio 创建与运行一个 flutter 项目的相关过程,总体来说还是非常简单的。

不过使用 Android Studio 开发与运行 Flutter 相对比较占用资源,我在本地运行一台 Android 模拟设备,一台 iPhone 模拟设备,总共消耗内存 6.5 GB 左右,电脑的风扇也是转的呼呼响。

所以如果你的电脑配置并不算太高,你也可以使用 Visual Studio Code 来开发 Flutter 项目,它的资源占用情况要好太多。而且 VS Code 也是官方推荐的 Flutter 开发 IDE。

附录

参考:https://book.flutterchina.club/chapter1/install_flutter.html

You may also like...

发表评论

电子邮件地址不会被公开。