零基础也能开发炫酷APP!AI神器Cursor+Flutter实战教程,小米11亲测可用!

点击👇关注我 学习更多AI知识

大家好,我是予贝

最近有很多朋友咨询 AI 编程开发安卓应用的教程,虽然我是安卓新手,但借助 AI 工具已经能快速开发出炫酷的 APP 了

picture.image

picture.image

本教程使用 Cursor(AI 代码助手) + Flutter(跨平台框架) 进行讲解,在开发之前需要先安装 Flutter,Android Studio 等工具

一、Flutter 介绍

Flutter 是由 Google 推出的开源 UI 工具包,用于高效构建 精美、原生编译 的跨平台应用。开发者只需编写一套 Dart 代码,即可轻松部署到 iOS、Android、Web、Windows、macOS 和 Linux 六大平台,显著节省开发时间和成本。

核心优势在于 高性能渲染引擎 和丰富的 可定制组件库,能够实现流畅的动画效果和高度一致的跨平台用户体验。独特的 热重载 (Hot Reload) 功能极大提升开发效率,允许开发者实时查看代码修改效果。

Flutter 采用 声明式 UI 编程范式,让构建复杂界面更加直观高效。强大的社区生态和 Google 的持续支持,使其成为现代移动、桌面和 Web 应用开发的热门选择,被阿里巴巴、腾讯、宝马等众多知名公司广泛采用。

二、Flutter 安装

进入 Flutter 中文文档:https://docs.flutter.cn/index.html,点击开始使用

picture.image

根据自己的系统选择开发平台,我这里选择的 Windows

picture.image

选择 Android 即可

picture.image

进入了安装界面,按照安装教程安装,翻到开发工具,下载 Git 和 Android Studio

picture.image

Git 网上的教程很多,直接下载,双击安装即可。

Android Studio 下载网址:https://developer.android.google.cn/studio?hl=zh-cn,点击下载

picture.image

下载完成后,双击进行安装

picture.image

选择 Next

picture.image

Next

picture.image

选择合适的安装目录,点击 Next

picture.image

安装中

picture.image

启动后点击 Next

picture.image

选择 Standard,点击 Next

picture.image

点击 Next,安装 Android SDK

picture.image

点击 Accept,Finish

picture.image

安装中,等待安装完成

picture.image

Git 和 Android Studio 安装完成后,翻到安装 FlutterSDK 界面,选择自行下载安装,下载 SDK

picture.image

解压完成后目录里包含一个 flutter,复制到 D 盘或者其他目录,不要带中文

picture.image

搜索编辑系统环境变量,打开环境变量,在系统变量中双击 Path

picture.image

复制 flutter\bin 目录添加到环境变量中,一直点击确定。

picture.image

命令行输入 flutter --version,如果正确打印版本信息,则说明安装成功

picture.image

安装完成后,需要用 flutter doctor 检查一下环境配置,目前 Android toochain 提示异常,这样的话是无法连接手机测试的,需要解决

picture.image

解决缺少 cmdline-tools 组件问题

打开 Android Studio,点击左下角设置

picture.image

进入 Settings

picture.image

在设置界面依次点击 Language & Frameworks -> Android SDK -> SDK Tools , 勾选 "Android SDK Command-line Tools (latest)",点击 "Apply" 安装

picture.image

安装完成后点击 Finish 退出即可

picture.image

接下来解决 Android license status unknown 的问题

打开终端,运行以下命令:对所有提示输入 y 接受许可证

  
flutter doctor --android-licenses

picture.image

最后,重新启动一个中端,执行 flutter doctor 重新检查一下环境,如果全部显示正确,我们的环境就配置完成了

picture.image

三、Cursor 配置 Flutter

在 cursor 插件中搜索 flutter,安装 Flutter 插件

picture.image

按下快捷键 Control + Shift + P,并输入 flutter,选中 Flutter:New Project,回车

picture.image

选择前三个其中之一即可,我选择的 Empty Application,然后按照提示,输入项目名,Cursor 会帮我们把整个目录都创建好。

picture.image

项目创建好后,在终端输入 flutter devices 会列出目前可以运行的设备

picture.image

在终端输入 flutter run ,选择要运行的设备,编译完成后将会自动运行

picture.image

四、程序开发

本次我们使用 cursor 开发一款电子产品管理工具,Ctrl + I 打开 AI 对话框,输入提示词

提示词:

  
帮我开发一款炫酷的电子产品管理APP,现代风格  
  
# 要求  
- gradle使用8.3及以上版本  
- 我的手机型号是小米11

picture.image

五、手机运行

手机运行需要手机端开启开发者选项,不同的手机操作不同,建议用小米手机,这个步骤自己百度解决,开启后使用数据线连接,打开 USB 调试等设置

连接后在终端输入 flutter devices,如果配置成功,会显示设备名。

picture.image

连接后使用 flutter run 运行,大部分设备第一次都会遇到报错,主要是因为 gradle 源的问题,需要修改为国内地址

picture.image

找到 android 目录下的 gradle\wrapper 下的 gradle-wrapper.properties 文件,修改 distributionUrl 参数为 https://mirrors.cloud.tencent.com/gradle/gradle-8.3-all.zip

picture.image

修改完成后重新运行,第一次运行会很慢,请耐心等待,运行成功后界面如下所示,接着让 cursor 简单调整一下分辨率,修改完成后界面如右图所示

picture.image

picture.image

本次教程通过 Cursor + Flutter 的方式,带你体验了如何用 AI 辅助开发 一款安卓应用。即使你从未接触过安卓开发,也能借助 AI 工具快速上手,实现从 环境搭建 → 项目创建 → 代码生成 → 真机运行 的全流程,期待大家开发出优秀的作品。

picture.image

picture.image

我们坚信AI编程的门槛会变得越来越低,开源了AI编程手册,目前12万字,包含网站,小程序,APP等多种开发案例,希望对大家有帮助,需要的扫码获取

picture.image

0
0
0
0
评论
未登录
暂无评论