Cursor 写一个 Flutter Unsplash 壁纸工具 | 从零开始 - flutter技巧

Cursor 写一个 Flutter Unsplash 壁纸工具 | 从零开始

Unsplash 壁纸工具

视频

https://space.bilibili.com/404904528/channel/collectiondetail...

https://www.youtube.com/watch?v=-ecvMPs5vN4&list=PL274L1n86T8...

前言

原文用Cursor和Flutter构建动态图片墙的完整教程

使用 Curosr 工具，通过文字方式提供需求，竟可能不写一行代码来实现一个 Unsplash 图片墙工具。

参考

步骤

安装 curosr 工具

https://www.cursor.com/

安装完后会问你回答问题用什么语言，你输入中文。

Always respond in 中文

初始项目

新建一个 flutter_curosr 目录，然后用 curosr 打开，我们之后都是这个目录下操作。

创建 flutter 项目

cmd + k 命令面板

点击终端 tab ，cmd + k 打开命令面板。

# 提示词

创建 flutter 项目，程序名 flutter_curosr_unsplash , 包名 unsplash.ducafecat.com

保证根目录是flutter_curosr_unsplash

用 cursor 打开新创建的 flutter_curosr_unsplash 目录，保证这是根目录。

初始 git 环境

git版本控制初始

没完成一个功能，我们就要进行版本提交。

这样之后遇到改坏文件，我们进行 git 历史版本签出。

构建欢迎界面

准备 Unsplash Key

Unsplash Key

https://unsplash.com/oauth/applications

注册后，创建一个应用，获取 api key 。

确保 Composer 被打开

cursor composer open

打开 Composer 面板

cmd + i 方式打开。

提示词

你现在是一名 flutter 的工程师。

需要一个欢迎页面，点击确认才会进入首页界面，完整需求如下：
- 随机读取 unsplash 一张图片，作为背景。
- 图片 1080p 即可
- unsplash 的通讯类
- 需要写好完整的函数输入参数，输出对象说明
- 欢迎界面有一个刷新图片的按钮
- 关闭右上角 debug 标签

composer返回信息

点击 Accept All 按钮，应用所有的修改。

修正问题

错误处理

启动程序

欢迎屏幕

构建图片墙列表页

提示词 cmd + i

首页是图片墙样式的列表界面：
- 每行图片数量最少3张，按屏幕宽度自动计算图片数量（自适应）
- 每张图片正方形显示
- 拉取的图片分辨率 200x200
- 向下滚动时自动拉取新图片
- 顶部有一个分类的按钮组可切换，数量多横向可滚动。
- 请在控制台打印错误信息
- 注意图片拉取是是按分类筛选，默认全部
- 每个函数请加输入参数，输出类型的说明
- 标题居中，文字改成 壁纸工具
- 图片需要加入缓存功能

壁纸列表任务完成，并提交 git。

壁纸列表

构建图片详情页

提示词 cmd + i

详情页

点击图片墙列表进入图片详情页：
- 图片分辨率 1440p
- 全屏显示图片
- 支持手势缩放、旋转
- 顶部保留导航栏
- 导航栏有图片分享按钮
- 图片需要缓存

图片详情

保存相册功能

功能多，你需要分次进行，中间记得提交 git。

图片详情页进一步优化体验:
- 打开页面后先显示一张小图，全屏拉伸显示
- 等待下载大图的时候需要如下细节:
    - loading载入中
    - 转圈动画，线条腰粗
    - 显示百分比进度，保留整数部分

保存图片

图片保存

提示词 cmd + i

图片详情页实现图片保存功能:
- 使用 https://pub.dev/packages/saver_gallery 组件进行保存操作

样式调整

提示词 cmd + i

现在要对样式做些调整:
- 欢迎页、首页、图片详情页加入切换明暗色主题
- 主题颜色设置为 #ba7264
- 按钮、FilterChip 随主题色
- 首页图片载入的 CircularProgressIndicator 随主题色
- 详情页图片载入的 CircularProgressIndicator 随主题色
- 欢迎页图片分辨率 720p
- 首页列表图片分辨率 200x200
- 图片页大图分辨率 1440p

样式调整

写 README.md 文档

提示词

本程序用 flutter 开发的，请帮我写一个当前程序的技术说明文档，需要包含如下内容:
- 程序名称 "Unsplash壁纸工具"
- 功能介绍
- flutter 组件列表
- 程序目录文件清单（最多3层目录）

生成的 README.md 内容

# Unsplash 壁纸工具

一个使用 Flutter 开发的壁纸应用，基于 Unsplash API，提供高质量图片的浏览、下载和分享功能。

## 功能介绍

### 欢迎页

- 随机显示 Unsplash 图片（480p）
- 支持刷新随机图片
- 显示摄影师信息
- 支持明暗主题切换

### 首页

- 图片瀑布流布局（200x200 缩略图）
- 支持下拉刷新、上拉加载更多
- 横向滚动的分类选择
- 支持明暗主题切换

### 图片详情页

- 高清图片显示（1440p）
- 支持手势缩放和旋转
- 图片保存到相册
- 分享图片链接
- 支持明暗主题切换
- 显示加载进度

## 使用的 Flutter 组件

### 核心组件

- MaterialApp：应用程序框架
- Scaffold：页面布局框架
- Stack：层叠布局
- Column：垂直布局
- GridView：网格布局
- ListView：列表布局

### 第三方组件

- cached_network_image: ^3.3.0 - 图片缓存
- photo_view: ^0.14.0 - 图片查看器
- share_plus: ^10.1.1 - 系统分享
- saver_gallery: ^4.0.0 - 图片保存
- http: ^1.1.0 - 网络请求

### UI 组件

- CircularProgressIndicator - 加载指示器
- FilterChip - 分类选择
- IconButton - 图标按钮
- ElevatedButton - 凸起按钮
- GestureDetector - 手势检测

## 项目结构

```sh
lib/
├── main.dart # 应用程序入口
├── pages/ # 页面目录
│ ├── welcome_page.dart # 欢迎页
│ ├── home_page.dart # 首页
│ └── photo_detail_page.dart # 图片详情页
└── services/ # 服务目录
└── unsplash_service.dart # Unsplash API 服务
android/ # Android 平台相关配置
├── app/
│ ├── build.gradle
│ └── src/
│ └── main/
│ └── AndroidManifest.xml
└── build.gradle
ios/ # iOS 平台相关配置
└── Runner/
└── Info.plist
```

## 开发环境

- Flutter 3.19.0
- Dart 3.5.4
- Android SDK 34.0.0
- Xcode 15.0

代码

本文配套代码

小结

看到这里可以发现 cursor 比 copilot 好在两个地方：

有 compose 功能，帮你生成内容写到文件中
有命令行 ai 提示，支持上下文

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

猫哥 APP

flutter 学习路径

end

Cursor 写一个 Flutter Unsplash 壁纸工具 | 从零开始