組件積木

先前有提過在開發Flutter應用程式的過程中，我們大部份是使用各式不同功能的組件來組合而成。「工欲善其事，必先利其器」 就讓我們來認識一些組件的類型以及使用方式吧。

Text

Text 是畫面上用來顯示文字內容的組件。

var text = Text("text");

透過style參數設定，設定與本文相關的參數，例如大小、顏色、字體…。

    var textWithStyle = Text(
      "Bold Text",
      style: const TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
    );

也有像是 css 裡的 text-align 屬性語法 textAlgin，如下：

• left：向左對齊
• right：向右對齊
• center：置中對齊
• justify：左右對齊
• start：與TextDirection書寫設定有關
• end：與TextDirection書寫設定有關

    var textWithAlgin = Text(
      "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
      ),
    );

我們也可以透過透過Text.rich描述一段具有不同樣式或功能的本文內容，例如文字超連結。

    var richTextWithSpanStyle = Text.rich(
      TextSpan(
        children: [
          TextSpan(
            text: "鐵人賽: ",
            style: TextStyle(color: Colors.red),
          ),
          TextSpan(
            text: "點我去報名吧",
            style: TextStyle(color: Colors.blue),
            recognizer: TapGestureRecognizer()
              ..onTap = () =>
                  print('Go https://ithelp.ithome.com.tw/2021ironman/event'),
          ),
        ],
      ),
    );

字體設定

在開發 UI 上為了風格以及 App 特色，往往有使用特殊的字體用來處理文字的樣式，我們可以將想要使用的字體放置 Flutter 的專案目錄下。

Gooogle Fonts 提供了許多免費以及開源的字體，可以至這邊下載測試。

並至 pubspec.yaml 的 flutter: 區塊中設定好字體的路徑。

flutter:
  fonts:
    - family: BungeeOutline
      fonts:
        - asset: assets/fonts/BungeeOutline-Regular.ttf

如此一來就可以透過fontFamily指定想要的字體樣式。

    var textWithFont = Text(
      "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontFamily: 'BungeeOutline',
      ),
    );

注意這邊新增檔案後需要重新flutter run 讓 Flutter 將檔案打包進行，不然熱重載是不會看到效果的喔。

範例如下：

Image

Image 可以用來顯示一張圖片，根據載入來源(network、file、asset、memory)的不同，會有不同對應的建構方法可以使用，下面我們練習較常使用的兩種方式：

• Assets

讓我們照著剛剛字體設定的方式，新增一張圖片至 assets 目錄下的 images，這個assets名稱你可以自己定義，只要路徑與 pubspec.yaml 一致即可，設定錯誤的話在打包的過程 Flutter 讀取不到將會產生對應的錯誤訊息。

flutter:
  assets:
    - assets/images/cat-2083492-pixabay.jpg

使用 Image.asset 建構方法就可以快速的完成圖片的載入方式

    var imageFromAssets = Image.asset(
      "assets/images/cat-2083492-pixabay.jpg",
      width: 300,
    );

Asset 範例貓咪圖片使用來源pixabay圖庫

• Network

使用 Image.network 方樣提供圖片的 url 路徑來源。

    var imageFromNetowrk = Image.network(
      'https://itadstatic.ithome.com.tw/B1/1628779934_6115359ee4a54.gif',
    );

Network 範例圖片使用 2021 ithoem 鐵人賽 banner

P.S. 圖片來源若有侵權行為在麻煩通知我，感謝。

Widgets Library

在今日 Text、Image 兩個簡單的 widget 介紹中，我們可以發現在不同的 widget 通常會對應著不同的參數設定，這些參數或是使用方法我們不可能完全記得住，因此後續在學習過程中，我們通常可以透過下面幾個方法找到更多操作上的細節：

• Flutter SDK 內的 widgets library API 說明頁

除了參數的說明外，有些章節還會提供使用範例。

• 整合開發工具(IDE)的原始碼追蹤功能

以 VScode 為例，使用 CMD + 滑鼠左鍵 點選類別名稱，IDE會開啟 Flutter SDK 中的程式碼來源，從程式碼內的內容以及注解可以找到參數的設定方式。

• Google 大神

有了 widget 以及相關的參數名稱，但是還是搞不懂要如何使用，就將這些關鍵字貼給 Google 的大大吧。

小結

練習成果-Text

練習成果-Image

今日我們以Text以及Image這兩個簡單的組件做為 widget 學習的開場，帶領讀者開始認識 widget ，後續的章節將會介紹更多在 App 上常見的組件，理解未來在開發 App 時要如何使用這些 widget 客制化自己想要的介面以及功能。