Flutter作業#02 — 製作 App 畫面顯示文字

作業要求：

• 定義 StatelessWidget 製作 App 畫面顯示文字(使用到 MaterialApp、Scaffold、Center、Text、TextStyle)
• 補充: RichText widget

一、基礎版 (Text 設置)
  ＊小筆記：trailing comma
  
二、進階版(使用 column 添加多組 Text)
  ＊小筆記：小燈泡選項
  ＊小筆記：fontWeight

三、挑戰版（RichText & TextSpan）

⁍Text 與 RichText 的常用參數整理

Flutter 課程的第一項 Dart 語法作業是練習在畫面上顯示文字。不過目前還沒有介紹到 StatelessWidget 類別，我就先把程式碼都直接放到 runApp() 裡啦😆

剛好最近看到一組很可愛的文字廣告，正好可以拿來當練習題目～

一、基礎版

文字要求：

- 字體顏色綠色
- 大字體
- 文字對齊方式左右對齊

程式碼：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text(
          "If everyone came \nto us, this poster \nwouldn't need to \nbe so big", //換行符號一樣是\n
          style: TextStyle(
            fontSize: 120, //大字體
            color: Color.fromARGB(255, 0, 126, 41), //綠色
            height: 1, //原本預設的行高間距太寬啦，故手動調整行高。
          ),
          textAlign: TextAlign.justify, //左右兩邊都要對齊
        ),
      ),
    ),
  ));
}

chrome 網頁畫面呈現：

＊小筆記：

1. trailing comma

幫助 Flutter 縮排程式的 trailing-commas

要在括弧前額外再加個 “，”：

自動換行啦！

二、進階版

文字要求：

- 兩種字體尺寸
- 字體顏色綠色
- 字體加粗
- 文字對齊方式置中

程式碼：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column( //要設定兩種不同的 text widgets，故加入 Column layout
          mainAxisAlignment: MainAxisAlignment.center, //輸入 align 就會自動出現選項～
          children: [ //Column 是 Multi-child layout，所以內部的 widgets 要用 children[] 包起來
            Text( //第一段文字
              "Can the people who can read this poster \ntell the people who can't to book an eye test",
              style: TextStyle(
                fontSize: 36, //字體較大
                color: Color.fromARGB(255, 0, 126, 41),
                fontWeight: FontWeight.bold, //字體加粗
                height: 1,
              ),
              textAlign: TextAlign.center,
            ),
            Text( //第二段文字
              "\n(Thanks)",
              style: TextStyle(
                  fontSize: 22, //字體較小
                  color: Color.fromARGB(255, 0, 126, 41),
                  height: 1,
                  fontWeight: FontWeight.w600), //字體中粗
            ),
          ],
        ),
      ),
    ),
  ));
}

chrome 網頁畫面呈現：

＊小筆記：

1. 小燈泡選項

在 Center 這一層會出現 “Remove this widget” 選項，但在 Column 卻找不到：

詢問 ChatGPT 後得到的答案是因為要看 widget 屬於 Single-child layout 或Multi-child layout ：

另外像是 Text 這種 basic widget，則有另一組選項 Move widget down/ up 可以選擇：

ChatGPT 的回答：

2. fontWeight

在設置 fontWeight 時，發現 flutter 自動完成的選項中除了 normal 與 bold 之外，還有出現 w100-w900，一一測試之後發現好像沒什麼差別…? 詢問 ChatGPT 後告知可能是字體或渲染引擎沒有支援😂

測試結果

三、挑戰版

文字要求：

- 同一段話中設置不同文字顏色（richText）

程式碼：

//先設置兩種 TextStyle 的變數：
var greyStyle = TextStyle( //這邊用習慣的 var 設置
  fontSize: 64,
  fontWeight: FontWeight.bold,
  color: Colors.grey,
);

TextStyle blackStyle = TextStyle( //這邊用新學的 dart 語法：直接用型別宣告。比較特別的是 TextStyle 的 T 要大寫，跟 String 一樣。使用 textStyle 反而會出現錯誤提示。
  fontSize: 64,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: RichText( //因為同一段文字要套用不同的 style，故使用 RichText widget
            textAlign: TextAlign.center,
            text: TextSpan( 
              text: "WE WANTED TO WRITE ABOUT ",
              style: greyStyle,
              children: <TextSpan>[ //後續的 TextSpan list 是包在第一個 TextSpan 下的第一層
                TextSpan(text: "OUR ", style: blackStyle),
                TextSpan(text: "LOCALLY SOURCED NATURAL ", style: greyStyle),
                TextSpan(text: "INGREDIENTS", style: blackStyle),
                TextSpan(
                    text: ", BUT SHORT BILLBOARD HEADLINES ", style: greyStyle),
                TextSpan(text: "ARE BETTER", style: blackStyle),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

chrome 網頁畫面呈現：

⁍Text 與 RichText 的常用參數整理：

*from ChatGPT

Text Widget

Text 是 Flutter 中用於顯示一行或多行文本的基本 widget。它適合用於顯示簡單的文本內容。

常用參數

• data (String)：要顯示的文本內容。
• style (TextStyle)：文本的樣式，包括字體大小、顏色、字重等。
• textAlign (TextAlign)：文本的對齊方式，如 TextAlign.left, TextAlign.center, TextAlign.right 等。
• textDirection (TextDirection)：文本的方向，如 TextDirection.ltr (從左到右) 或 TextDirection.rtl (從右到左)。
• overflow (TextOverflow)：文本溢出時的處理方式，如 TextOverflow.ellipsis (省略號)。
• maxLines (int)：顯示的最大行數。
• softWrap (bool)：是否根據需要自動換行。
• strutStyle (StrutStyle)：設置文本的行間距和對齊等屬性。

範例

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
)

2. RichText Widget

RichText 是一個可以顯示複雜文本的 widget，支持不同的樣式和文本片段的混合。

常用參數

• text (TextSpan)：要顯示的文本內容，這個 TextSpan 可以包含子 TextSpan 來顯示複雜文本。
• textAlign (TextAlign)：文本的對齊方式，適用於 RichText 內部的文本。

TextSpan 常用參數

• text (String)：要顯示的文本內容。
• style (TextStyle)：文本的樣式，包括字體大小、顏色、字重等。
• children (List<TextSpan>)：包含的子 TextSpan 列表，用於創建多樣式文本。

範例

RichText(
  text: TextSpan(
    text: 'Welcome to ',
    style: TextStyle(color: Colors.black, fontSize: 20),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter!',
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: ' This is a demo of ',
        style: TextStyle(color: Colors.black),
      ),
      TextSpan(
        text: 'RichText',
        style: TextStyle(color: Colors.red, fontStyle: FontStyle.italic),
      ),
    ],
  ),
  textAlign: TextAlign.center,
)

比較

• Text：
  - 適合顯示單一樣式的簡單文本。
  - 不支持內嵌不同樣式的文本片段。
• RichText：
  - 適合顯示複雜文本，支持多種樣式和格式。
  - 使用 TextSpan 來構建多層次的文本樣式。