iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Mobile Development

《30 天 Flutter:跨平台 AI 行程規劃 App》 系列

以 Flutter 打造跨平台 AI 行程規劃 App,支援 iOS 與 Android。使用者可輸入旅遊地點、天數與個人偏好,系統將生成每日行程與景點、美食建議,並搭配地圖標示功能。
負責介面設計與互動邏輯,實現順暢的操作體驗與清晰的行程展示。透過 Flutter 單一程式碼基底,確保跨平台視覺與操作一致。30 天內將完成 UI 設計、功能實作及資料串接,呈現完整且易用的應用成品。

參賽天數 18 天 | 共 18 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 - AI 行程規劃 App 的起點:從使用者痛點到開發藍圖

我喜歡旅行,喜歡到不同的國家放空做自己,但我懂,光是行程規劃就夠讓人一個頭兩個大。要查景點、找美食、安排交通,還要跟旅伴協調,這些瑣碎的事真的會佔據很多時間和心...

2025-08-15 ‧ 由 yenyen0318 分享
DAY 2

Day 2 - 把藍圖化為實際:用 Stitch Designer 產出 UI 初稿

在 Day 1,構思了 App 的三大核心功能。有了藍圖,今天的任務就是把它化為實際:和 Gemini 討論出一份具體的規格,再運用 Stitch Design...

2025-08-16 ‧ 由 yenyen0318 分享
DAY 3

Day 3 - 從設計初稿到設計系統:打造 App 的視覺骨架

前兩天我完成了 App 的 UI 初稿,今天想試著將這些設計系統化。這個過程有助於建立一套完整的設計規範,讓後續的設計和開發更有效率,也能確保 App 整體視覺...

2025-08-17 ‧ 由 yenyen0318 分享
DAY 4

Day 4 - 將視覺骨架化為程式碼:在 Flutter 中實作設計系統

前幾天從使用者痛點出發,用 Stitch Designer 產出了 App 的 UI 初稿,接著在 Figma 上將設計元素系統化,建立了顏色的色階、定義了字體...

2025-08-18 ‧ 由 yenyen0318 分享
DAY 5

Day 5 - 一樣的地方改一次就好:在 Figma 中打造專屬元件庫

在前面幾天,已經完成了 AI 行程規劃 App 的視覺骨架,並將它系統化。今天,就來將他元件化吧! 有過在設計稿中不斷複製、貼上相同的按鈕、卡片或表單欄位的狀況...

2025-08-19 ‧ 由 yenyen0318 分享
DAY 6

Day 6 - 從 Figma 到 Flutter:將設計系統化為 UI 元件

在 Figma 中將設計元素整理成系統與元件後,現在我們要進入更關鍵的一步:將這些視覺藍圖化為實際的 Flutter 程式碼!這不只是將設計稿變成 App 畫面...

2025-08-20 ‧ 由 yenyen0318 分享
DAY 7

Day 7 - 不只是深色模式:讓你的 Flutter App 也有個性主題

今天將深入探討如何使用 ThemeExtension 來實現 Flutter 應用程式的多主題管理。多主題設計的價值遠不止於提供基本的深色與淺色模式。它更是一種...

2025-08-21 ‧ 由 yenyen0318 分享
DAY 8

Day 8 - 解鎖 Dart MCP Server:開發效率瞬間提升的秘密武器

今天氣到不要不要的,決定好好研究一下 Dart MCP Server 能不能直接取代公司同事,至少加速整個專案開發!這項功能是 Dart 3.9 之後才推出的,...

2025-08-22 ‧ 由 yenyen0318 分享
DAY 9

Day 9 - 從迷路到清晰:用 Deepwiki 快速理解 Riverpod

還記得以前為了找文件上沒有的救命 function,得花大把時間慢慢翻閱套件的原始碼嗎? 之前就聽說了 Deepwiki,一個能解決這個痛點的工具,今天終於有時...

2025-08-23 ‧ 由 yenyen0318 分享
DAY 10

Day 10 – 畫面刻畫與介面實作:結合 AI 工具的效率觀察

今天主要聚焦於畫面設計與使用者介面的實作,結合前幾章提到的 AI 助手輔助,在完整實作設計系統的情況下,觀察完成各功能所需時間,今日將完成以下三個主要頁面:...

2025-08-24 ‧ 由 yenyen0318 分享