在註冊時通常會服務營運端會放置一些規章要求你同意，其中一種的表現方式是在一段的文字中帶有連結，讓你點擊過去，或是直接勾選同意。接下來要展示如何在 Flutter 中實現這樣的效果。
其實，在前一篇 [Flutter] 自定義字型的方法 最後有提到這次的元件。沒錯！就是使用 Text.rich 或是 RichText 在搭配上 TextSpan。
底下我們就來展示一段文字中有些文字是可以點擊連結開啟網頁，在開始寫之前，請先安裝 url_launcher 套件，以便開啟網頁。
url_launcher 版本 6.1.7
1
| flutter pub add url_launcher
|
為了方便，直接使用 Discord 的註冊 頁面中的文字，以下是程式碼
註冊即代表同意 Discord 的 服務條款 及 隱私權政策。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| RichText(
text: TextSpan(
children: <TextSpan>[
const TextSpan(text: '註冊即代表同意 Discord 的 '),
TextSpan(
text: '服務條款',
style: const TextStyle(
color: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () {
launchUrl(Uri.parse('https://discord.com/terms'));
},
),
const TextSpan(text: ' 及 '),
TextSpan(
text: '隱私權政策',
style: const TextStyle(
color: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () {
launchUrl(Uri.parse('https://discord.com/privacy'));
},
),
const TextSpan(text: '。')
],
style: const TextStyle(
color: Colors.black,
),
),
)
|
從上面的範例中，預設的文字顏色是黑色，有連結的文字是藍色，讓使用者更容易的辨認。在 TextSpan 中透過 recognizer 的屬性，使用 TapGestureRecognizer 來處理單次點擊的行為，裡面直接開啟外部的網頁。