一、前言

這篇要做的是App的外觀，配色和介面順不順眼，是決定粉絲願不願意常常點開這個App的關鍵。這邊會介紹ColorScheme.fromSeed是什麼怎麼用，再搭配Google Fonts換掉預設的字型。下週就要開始挑戰 AI 語音翻譯功能了。

什麼是ColorScheme.fromSeed？
以前的寫法要自己手動挑顏色，AppBar、按鈕各自設定，常常配著配著就覺得哪裡怪怪的，現在用 ColorScheme.fromSeed 就輕鬆多了，你只要選一個喜歡的主色，Flutter就會自動幫你配好一整套顏色，感覺就像請了一個配色師，幫你把按鈕、背景全部配得剛剛好，就不用自己一個一個試。

什麼是Google Fonts？
App內建的字體是設計給英文用的，顯示中文字時會比較生硬、不好看。用了Google Fonts後，一行程式碼就能把整個App的中文字都換成更好看的字體，質感馬上不一樣。

二、今日任務

打造專屬追星 Theme

只需要修改 lib/main.dart，加入自訂色彩與字型設定即可！

1.定義顏色常數

    const primaryIdolColor = Color(0xFFE91E63); 
    const secondaryIdolColor = Color(0xFF9C27B0);

2.用ColorScheme.fromSeed取代primarySwatch

        colorScheme: ColorScheme.fromSeed(
          seedColor: primaryIdolColor,
          primary: primaryIdolColor,
          secondary: secondaryIdolColor,
          surface: const Color(0xFFFFF8FA), 
        ),

3.換字型

        textTheme: GoogleFonts.notoSansTcTextTheme(
          Theme.of(context).textTheme,
        ),

4.樣式

        cardTheme: CardTheme(
          elevation: 2,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
        ),

5.appbar樣式

        appBarTheme: const AppBarTheme(
          centerTitle: true,
          backgroundColor: primaryIdolColor,
          foregroundColor: Colors.white,
          elevation: 0,
        ),

檢查清單

• [x] 執行 ，觀察 App 的按鈕、AppBar、背景顏色是否能切換成自己想要的顏色。