iT邦幫忙

flutter相關文章
共有 613 則文章
鐵人賽 Mobile Development DAY 29

技術 Day 29 - 藍圖旅人的誕生:從命名、Icon 到啟動畫面的全紀錄

命名的誕生 歷經快三十天的開發,今天終於要幫我的 APP 正式命名了。在 AI 的輔助下,最後採用了 Gemini 點子發想模式提供的建議: 名稱:藍圖旅人(...

鐵人賽 Mobile Development DAY 26

技術 Day 26 - 擴充行程規劃 APP:加入 AI 對話式編輯器

背景與痛點 在近期實際規劃行程的過程中,我試用了這款 AI 行程規劃 APP。不得不說,AI 自動產生行程的功能確實大幅降低了使用門檻,使用者只要輸入需求就能立...

鐵人賽 Mobile Development DAY 9

技術 30 天做一個極簡App:滑動的藝術,實作卡片堆疊與滑動效果

昨天成功用Flutter的基礎Widgets刻畫出了「日更靈感App的核心——那張極簡的靈感卡片。它現在靜靜地待在畫面上,雖然好看,但就只是好看。 今天的目標,...

鐵人賽 Mobile Development DAY 8

技術 30 天做一個極簡App:設計極簡,用 Flutter 實現卡片UI

來到我開發之旅的第二週!在第一週,成功地從零到一,搭建並打通了n8n後端與Flutter前端的數據橋樑。 本週的進行主軸,是將極簡App塑造一個優雅的「肉體」,...

鐵人賽 Mobile Development DAY 7

技術 30 天做一個極簡App:打造資料模型與 Repository

第一週的最終章~擦啦!昨天完成了一個初始化的專案、一套清晰的架構藍圖,以及Riverpod這個強大的狀態管理核心。讓App像是一個擁有骨架的機器人,但它還沒有與...

鐵人賽 Mobile Development DAY 24

技術 Day 24 - 地圖實戰:客製地圖 Marker 讓行程一看就懂

Marker 的 infoWindow 雖然可以在點擊後顯示景點資訊,但對於「點擊後直接導航」這個需求就產生了衝突。為了讓使用者不用點擊就能一眼知道這是哪個景點...

鐵人賽 Mobile Development DAY 25

技術 Day 25 - 地圖實戰:Map Style,自己的地圖自己定義

在行程規劃 App 裡,地圖不只是背景,而是資訊承載的重要介面。今天要動手實作 Google Map 在 Flutter 中的客製化應用,重點在於「地圖樣式切換...

鐵人賽 Mobile Development DAY 6

技術 30 天做一個極簡App:Flutter 專案初始化與架構規劃

接下來是開發之旅的全新篇~過去的一週裡,主要全心投入在n8n的世界,從無到有,打造了一個由AI驅動的自動化內容後端,現在準備就緒,將從後端的伺服器,走向前端的使...

鐵人賽 Mobile Development DAY 5

技術 30 天做一個極簡App:工作流的最後一哩路~Webhook API

過去四天裡,像是在打造一條數位工廠的生產線:設定廠房(Day2)、建立原料篩選機制(Day3),到引進核心的 AI加工技術(Day4)。 現在,來到我們的生產線...

鐵人賽 Mobile Development DAY 23

技術 Day 23 - 地圖實戰:把每天行程串成路線圖,一鍵就出發

上一篇入門地圖套件的各參數並可以簡易使用,今天就要把行程跟地圖真正串起來,讓使用者可以直覺地看到每天的活動分布。 這次的目標是: 新增地圖頁面將當天所有行程用...

鐵人賽 Mobile Development DAY 22

技術 Day 22 - 行程 APP 沒地圖怎麼行?從零打造地圖互動功能,試試 ChatGPT 的教學體驗

今天不知道 Gemini 怎麼了,突然直接噴 500 錯誤,原本想靠它來學習 Google Map 套件。既然不給力,就乾脆跳槽到 ChatGPT 吧!剛好最近...

鐵人賽 Mobile Development DAY 21

技術 Day 21 - 從單機到分享:讓旅伴也能擁有這份完美行程

前幾天已經成功地讓使用者即使在沒有網路的情況下,也能安心地規劃行程。但我開始思考,一個完美的行程,如果只能自己用,是不是有點可惜? 我想做的,不只是讓 App...

鐵人賽 Mobile Development DAY 20

技術 Day 20 - Drift 實戰:結合 StreamProvider,從手動更新到 UI 自動同步

前幾天在處理資料庫時,每當新增、更新或刪除資料後,我都得手動呼叫 ref.invalidateSelf(),讓 Riverpod 重新計算 provider,進...

鐵人賽 Mobile Development DAY 1

技術 【30 天做一個極簡App】技術選型與系統設計(Flutter × LLM × n8n)

「明明很有想法,下筆卻很困難?」 這是我在工作中,時常接觸到知識型創作者和中小型企業主,最常聽到的心聲!他們能言善道,說自己的想法時,既真誠又有魅力(油嘴滑...

鐵人賽 Mobile Development DAY 19

技術 Day 19 - Drift 效能實戰:結合 Transaction 與 Batch,打造高效的批次寫入

前一天,我處理了行程的 CRUD 功能,這一切看起來都很順利。但當我動手實作 Day 13 的行程的拖曳排序 及 Day 15 AI 行程生成批次存入 時,才發...

鐵人賽 Mobile Development DAY 18

技術 Day 18 - Drift 實戰:從 UI 介面到 DB Migration 的跌跌撞撞

在實作行程、活動及子活動的 CRUD 功能時,我發現了一個資料庫設計的潛在問題。為了確保資料的一致性,我決定重構 ActivitiesTable 並進行版本遷移...

鐵人賽 Mobile Development DAY 17

技術 Day 17 - Drift CRUD 入門:跟著 Gemini 玩轉資料庫

今天我持續透過 Gemini 職涯導師模式,學習資料模型與 CRUD 操作。將統整我今日的學習內容,並簡要分享 Gemini 職涯導師在引導學習全新套件時的實際...

鐵人賽 Mobile Development DAY 16

技術 Day 16 - 選擇 Flutter 本地儲存:為何我擁抱 Drift

在開發我的 AI 行程 App 時,我面臨了一個關鍵的決策:該如何選擇本地資料庫?市面上有許多優秀的套件,從輕量級的 shared_preferences、高效...

鐵人賽 Mobile Development DAY 15

技術 Day 15 - AI 可以幫我排行程了!從假資料到真實情境完整演練

昨天先用假資料跑流程,今天重點放在撰寫單元測試,確保資料能正確取得,也能捕捉各種錯誤。程式不只是能跑,還能透過測試驗證不同情境,未來換 API 或調整資料結構時...

鐵人賽 Mobile Development DAY 14

技術 Day 14 - 從 Prompt 到程式碼:API 串接前的測試與準備

前幾天把 UI 畫面大致刻完了,今天正式進入後端串接的階段!在真正接上 API 之前,會先用假資料(Fake Repository)來測試,確認資料流跟狀態管理...

鐵人賽 Mobile Development DAY 13

技術 Day 13 - 行程拖曳功能開發:LongPressDraggable 與 DragTarget 的選擇與實作

今天的開發重點是讓使用者可以拖曳行程項目快速調整順序,提升操作直覺性與流暢度。從需求出發,分析不同原生實作方式,並分享我最終選擇 LongPressDragga...

鐵人賽 Mobile Development DAY 12

技術 Day 12 - 從靜態畫面到功能實現:核心行程 UI 宣告完成

今天的重點是把 資料模型 跟 狀態管理 串起來,然後透過 UI 驗證 時間區塊防呆設計,確認資料流與使用流程是否順暢。今天主要目標頁面: 添加行程頁 行程總覽...

鐵人賽 Mobile Development DAY 11

技術 Day 11 - 從填空題到選擇題:Flutter 輸入元件技術拆解

在 Flutter 開發中,表單輸入幾乎是每個 App 都會遇到的需求,但不同的輸入欄位如果用同一種元件,很容易造成操作不便或樣式混亂。今天目標是實作「新增行程...

鐵人賽 Mobile Development DAY 10

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

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

鐵人賽 Mobile Development DAY 9

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

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

鐵人賽 Mobile Development DAY 8

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

今天氣到不行,決定好好研究一下 Dart MCP Server 看能不能加速整個專案開發!這項功能是 Dart 3.9 之後才推出的,根據官網的介紹,它能協助的...

鐵人賽 Mobile Development DAY 7

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

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

鐵人賽 Mobile Development DAY 6

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

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

鐵人賽 Security DAY 5

技術 【Day 05 協議詳解 III】信任的證明:解構 WebAuthn 驗證儀式

前言:從契約到通行證 在昨天的註冊儀式中,我們的後端伺服器(RP)與使用者的驗證器簽訂了一份基於公鑰密碼學的信任契約。這份契約的核心是我們安全地儲存了使用者的公...

鐵人賽 Security DAY 4

技術 【Day 04 —協議詳解 II】信任的誕生:解構 WebAuthn 註冊儀式

前言:從對話到契約 昨天,我們認識了 WebAuthn 世界中的三大主角,並了解了「註冊 (Attestation)」與「驗證 (Assertion)」這兩大核...