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

今天的目標，就是為它注入生命！我們要讓使用者可以像玩Tinder或其他卡片App一樣，透過「滑動」這個直覺的手勢來與內容互動。向左滑，代表「暫時不需要這個靈感」，向右滑，則代表「這個靈感不錯，先保留下來」。

這個滑動的互動是我們 App 的核心體驗，今天，我們就來把它實現出來！

技術選擇：flutter_card_swiper vs. 自訂

實現卡片滑動有兩種主流方式：

自訂GestureDetector+ AnimatedPositioned：這是最底層、最客製化的作法。我們可以完全控制動畫的物理效果、角度、速度等。但缺點是實作起來相對複雜，需要處理大量的狀態和動畫邏輯。

將使用現成的套件，社群中有許多優秀的套件，如flutter_card_swiper。它封裝了複雜的動畫和手勢邏輯，讓我們可以專注在業務功能上。

也考量到我們30天的開發時程，以及專注於完成MVP的目標，我們將選擇flutter_card_swiper。它功能強大、文件清晰，能讓我們快速達到想要的效果。

第一步：安裝與引入flutter_card_swiper

打開你的終端機，在專案根目錄下執行以下指令來安裝套件：

Bash
flutter pub add fluttercardswiper

安裝完成後，在需要使用的檔案頂部引入它：

Dart
import 'package:fluttercardswiper/fluttercardswiper.dart';

第二步：準備我們的卡片資料

雖然還沒正式串接Day 7的API資料，但為了看到堆疊效果，我們需要一個卡片列表。現在先用Day 8建立的 InspirationCard Widget來產生一些假的卡片資料。

假設你的卡片 Widget叫做InspirationCard，我們可以在 build 方法中先建立一個 List：

// 暫時的假資料，我們會在 Day 10 用狀態管理取代
final List<Widget> cards = [
  InspirationCard(
    summary: '靈感一：文章驅動開發是一種確保文件與實作同步的絕佳實踐。',
    tags: ['開發流程', '敏捷'],
  ),
  InspirationCard(
    summary: '靈感二：在設計 UI 時，給予足夠的「留白」和呼吸空間，能大幅提升使用者體驗。',
    tags: ['UI/UX', '設計原則'],
  ),
  InspirationCard(
    summary: '靈感三：使用 n8n 這類視覺化工作流工具，可以讓非後端工程師也能快速打造自動化服務。',
    tags: ['n8n', '自動化', 'Low-code'],
  ),
];

第三步：實作CardSwiper Widget

現在用CardSwiper來取代昨天放在畫面中央的單一卡片。

CardSwiper的使用非常直觀，主要有兩個必要的參數：

• cardsCount：卡片的總數量。
• cardBuilder：一個根據索引 index 來建立卡片 Widget 的建構器。

（程式碼太長，先跳過，以下為此程式碼的重點解析。）

• CardSwiper(...)：我們將它放置在 Center 和 SizedBox 中，來約束卡片疊的顯示區域。
• cardsCount: cards.length：告訴 Swiper 我們總共有多少張卡片。
• cardBuilder: (..., index, ...)：這是一個函式，Swiper 會遍歷 0 到 cardsCount - 1，並用這個函式來繪製每一張卡片。我們直接回傳 cards[index] 即可。
• onSwipe: _onSwipe：這是關鍵！每當使用者完成一次滑動手勢，這個回呼函式就會被觸發。它會傳入滑動的方向 direction。
• _onSwipe 函式：我們在函式中判斷 direction。如果是 CardSwiperDirection.right，就代表使用者向右滑（保留）；如果是 CardSwiperDirection.left，就代表向左滑（捨棄）。目前我們先用 debugPrint 在控制台印出訊息，明天就會在這裡加入真正的狀態管理邏輯。
• isLoop: false：我們希望靈感看完就沒了，而不是無限循環，所以設為 false。
• backCardOffset & numberOfCardsOnScreen：這兩個參數可以美化堆疊效果，讓後方的卡片稍微露出來，更有層次感。

明日預告：「狀態管理」入門！

今天將靜態的卡片UI轉化為一個充滿動感、可互動的核心元件。透過flutter_card_swiper套件，使我們快速實現了卡片的堆疊與滑動效果，並定義了左右滑動分別代表「捨棄」與「保留」的意圖。

然而，你可能已經發現，目前滑掉的卡片只是在畫面上消失了，App 並沒有真正「記住」我們的選擇。這正是因為我們還缺少了「狀態管理」。

明天，將使用的狀態管理工具Riverpod，來管理我們的靈感卡片列表，讓每一次滑動都能確實地改變App的狀態，敬請期待！

【哈囉你好：）感謝你的閱讀！其他我會常出沒的地方：Threads】