2025 iThome鐵人賽
「 Flutter ：30天打造念佛App，跨平台從Mobile到VR，讓極樂世界在眼前實現 ! 」
Day 26
「 Flutter UI 實戰應用篇 — 生活在地球的勇者啊，怎麼見極樂世界呀 ? (2) 」

《佛說阿彌陀經》:

「 又舍利弗。極樂國土，有七寶池，八功德水，充滿其中，池底純以金沙布地。四邊階道，金、銀、琉璃、玻璃合成。上有樓閣，亦以金、銀、琉璃、玻璃、硨磲、赤珠、瑪瑙而嚴飾之。池中蓮花大如車輪，青色青光、黃色黃光、赤色赤光、白色白光，微妙香潔。 」

白話：
舍利弗，極樂世界有七種寶物構成的七寶池，
由具備八種功德的水注滿七寶池，池底全是金沙遍佈滿地。

池邊周圍的台階與道路，由金、銀、琉璃、玻璃構成。
街道上的樓房，也都由金、銀、琉璃、玻璃、硨磲、赤珠、瑪瑙 莊嚴地佈置裝飾。

七寶池中的蓮花，大小如馬車的車輪，青色蓮花綻放青色光芒，黃色蓮花綻放黃色光芒，紅色蓮花綻放紅色光芒，白色蓮花綻放白色光芒，蓮花質地精微神妙且芬芳清淨。

前言

昨天我們已經初步認識「 UX&UI 設計流程」、「 Logic Flow 操作邏輯流程」、「 Wireframe 線框稿」，今天我們要接著一起認識 App Human Interface Guidelines、Google Material Design，並且了解 flutter 開發建議採用的設計指南與各平台 UI 相關的送審事項 !

Day26 文章目錄：
一、Human Interface Guidelines
二、Material Design
三、Material Design for Flutter

一、Human Interface Guidelines

1. 簡介

Human Interface Guidelines（HIG）是 Apple 官方提供
蘋果生態系(iOS、iPadOS、macOS等)開發的設計規範指引。

內容涵蓋：設計原則、版面（Layout）、互動與動態、元件、無障礙，
以及各平台特有的模式（如分割畫面、選單、導覽）。

目標是：協助開發者做出符合蘋果生態系習慣、直覺、一致性的產品。

2. 重點

3. 送審相關事項

2.1 App Completeness
placeholder text, empty websites, and other temporary content should be scrubbed before submission.

送審前，必須移除所有佔位文字、空白網站/頁面以及其他臨時內容。

2.3 Accurate Metadata
don’t include names, icons, or imagery of other mobile platforms or alternative app marketplaces in your app or metadata, unless there is specific, approved interactive functionality.

除非具有具體且已核准的互動功能，
否則不得在 App 或中繼資料中加入其他行動平台或替代應用程式市集的名稱、圖示或圖像。

5.1.1 Data Collection and Storage
(v) Account Sign-In:If your app doesn’t include significant account-based features, let people use it without a login. If your app supports account creation, you must also offer account deletion within the app.

如果 App 不包含重要的帳戶導向功能，就應該允許使用者不登入也能使用。
若 App 支援建立帳戶，也必須在 App 內提供刪除帳戶的功能。

二、Material Design

1. 簡介

Material Design 是 Google 推出的跨平台設計系統，
內容涵蓋：設計哲學、排版與色彩規範、元件庫、動態規則、無障礙指引等，
目標是：協助開發者做出跨平台與裝置的 UI 最佳實踐。

2. 重點

15 種字體比例

Design Token

3. 送審相關事項

三、Material Design for Flutter

1. 簡介

Flutter 3.16 起預設 useMaterial3: true ( M3 )，
flutter 開發實務上也會建議採用 Google Material Design 為主，
再視實務需要搭配 iOS Cupertino。

2. Flutter : Material 2 vs. Material 3

3. MaterialApp.theme 示範

ColorScheme.fromSeed 指定種子色，
Flutter 會依 Material 3 的色彩系統自動推導完整 ColorScheme，
因此換一個種子色就能「連動」整體主題配色。

GIF : 淺色模式 、 深色模式

//app_theme.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';


class Brand {
 
  static const Color seed = Color(0xFF6750A4); //種子色 Value (Hex)

  //System Token 淺色模式
  static ColorScheme light({double contrast = 0}) =>
      ColorScheme.fromSeed(seedColor: seed, brightness: Brightness.light, contrastLevel: contrast);
  //System Token 深色模式
  static ColorScheme dark({double contrast = 0}) =>
      ColorScheme.fromSeed(seedColor: seed, brightness: Brightness.dark, contrastLevel: contrast);

  //設置主題
  static ThemeData theme(Brightness brightness, {double contrast = 0}) {
    final scheme = brightness == Brightness.dark
        ? dark(contrast: contrast)
        : light(contrast: contrast);

    return ThemeData(
      useMaterial3: true,    // M3
      colorScheme: scheme,   // 顏色方案
     
      textTheme: GoogleFonts.notoSansTextTheme(), //字體方案
    );
  }
}

//main.dart

import 'package:flutter/material.dart';
import 'app_theme.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appName = 'Custom Themes';

    return MaterialApp(
      title: appName,
      themeMode: ThemeMode.system, //隨裝置切換深、淺色模式
      theme: Brand.theme(Brightness.light), //淺色模式
      darkTheme: Brand.theme(Brightness.dark),//深色模式
      home: const MyHomePage(title: appName),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme; //App主題顏色方案
    final textTheme = Theme.of(context).textTheme;//App主題字體方案

    return Scaffold(
      appBar: AppBar(
        backgroundColor: scheme.secondary, 
        title: Text(
          title,
          style: textTheme.titleLarge!.copyWith(color: scheme.onSecondary),
        ),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
          color: scheme.primaryContainer, 
          child: Text(
            'Text with a background color',
            style: textTheme.bodyMedium!.copyWith(color: scheme.onPrimaryContainer),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Day26 重點回顧