Flutter 電商 App 開發

專案概述

為知名零售品牌開發的跨平台電商 App，使用 Flutter 框架，一套程式碼同時支援 iOS 與 Android。整合完整購物流程、會員系統、門市導航、推播通知，並與既有 ERP 系統無縫對接。

App 上線後下載量達 50,000+，月活用戶 15,000+，線上訂單佔比提升至 25%。

核心功能

1. 商品瀏覽與搜尋

• 分類瀏覽與標籤篩選
• 智慧搜尋（支援拼音、關鍵字）
• 商品推薦演算法
• 高效圖片載入與快取

// 商品列表元件（含無限滾動）
class ProductListView extends StatelessWidget {
  final ProductController controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return Obx(() => NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        if (notification is ScrollEndNotification &&
            notification.metrics.extentAfter < 200) {
          controller.loadMore();
        }
        return false;
      },
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.7,
          crossAxisSpacing: 12,
          mainAxisSpacing: 12,
        ),
        itemCount: controller.products.length,
        itemBuilder: (context, index) {
          final product = controller.products[index];
          return ProductCard(product: product);
        },
      ),
    ));
  }
}

2. 購物車與結帳

• 購物車即時同步
• 多種支付方式（信用卡、Apple Pay、Line Pay）
• 優惠券與折扣碼
• 訂單追蹤

3. 會員系統

• 社群登入（Google、Apple、Facebook）
• 會員等級與點數
• 收藏清單
• 訂單歷史

4. 門市導航

整合 Google Maps，提供最近門市搜尋與導航：

// 最近門市搜尋
class StoreLocatorService {
  final GoogleMapsService _mapsService;

  Future<List<Store>> findNearbyStores(LatLng userLocation) async {
    final stores = await _storeRepository.getAll();

    // 計算距離並排序
    final storesWithDistance = stores.map((store) {
      final distance = _calculateDistance(
        userLocation,
        LatLng(store.latitude, store.longitude),
      );
      return StoreWithDistance(store: store, distance: distance);
    }).toList();

    storesWithDistance.sort((a, b) => a.distance.compareTo(b.distance));

    return storesWithDistance.take(10).map((s) => s.store).toList();
  }
}

技術架構

┌─────────────────────────────────────────────────────────┐
│                   Flutter App                           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │ 商品模組    │  │ 購物車模組   │  │ 會員模組    │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │ 訂單模組    │  │ 門市模組    │  │ 推播模組    │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
├─────────────────────────────────────────────────────────┤
│                   GetX 狀態管理                         │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │  REST API   │  │  Firebase   │  │   Stripe    │     │
│  │  Client     │  │  FCM/Auth   │  │   Payment   │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
└─────────────────────────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────┐
│                    後端服務                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │  商品 API   │  │  訂單 API   │  │  會員 API   │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
│                         │                               │
│                    ┌────┴────┐                         │
│                    │   ERP   │                         │
│                    │  整合    │                         │
│                    └─────────┘                         │
└─────────────────────────────────────────────────────────┘

專案成果

• 開發效率：一套程式碼，雙平台上架
• 效能：啟動時間 < 2 秒，頁面切換流暢
• 用戶評價：App Store 4.7 分，Google Play 4.5 分
• 轉換率：App 訂單轉換率比網頁高 40%

客戶評價

「Flutter 讓我們能快速迭代新功能，同時維持兩個平台的一致體驗。團隊的技術實力和溝通效率都很好。」 — 產品經理