Cursor 寫一個 Flutter Unsplash 桌布工具 | 從零開始

独立开发者_猫哥發表於2024-10-31
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 圖片牆工具。

參考

  • Cursor Ai Ide
  • Curosr Docs
  • Curosr Docs Symblos

步驟

安裝 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 目錄

保證根目錄是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 好在兩個地方：

  1. 有 compose 功能，幫你生成內容寫到檔案中
  2. 有命令列 ai 提示，支援上下文

感謝閱讀本文

如果有什麼建議，請在評論中讓我知道。我很樂意改進。

貓哥 APP

  • SaaS Fast
  • Flutter GetX Generator

flutter 學習路徑

  • Flutter 優秀外掛推薦
  • Flutter 基礎篇1 - Dart 語言學習
  • Flutter 基礎篇2 - 快速上手
  • Flutter 實戰1 - Getx Woo 電商APP
  • Flutter 實戰2 - 上架指南 Apple Store、Google Play
  • Flutter 基礎篇3 - 仿微信朋友圈
  • Flutter 實戰3 - 騰訊即時通訊 第一篇
  • Flutter 實戰4 - 騰訊即時通訊 第二篇

© 貓哥
ducafecat.com

end

相關文章