iT邦幫忙

2023 iThome 鐵人賽

DAY 18
0
Mobile Development

初窺Flutter系列 第 18

Flutter 資源匯入-自訂義字體

  • 分享至 

  • xImage
  •  

在text widget中學習了很多用法,唯獨字體沒學習到,今天特別學習如何在Flutter中匯入資源,自訂義字體,方法其實和image文章中所學的本地圖片載入非常類似

首先先上網搜尋好要的字體,下載到電腦中(副檔名為ttf)

接著在Amdroid studio 工作列中新增一個fonts的資料夾(如圖藍色區塊)
https://ithelp.ithome.com.tw/upload/images/20231003/201626841cJ5oKgKOI.png

創建好後,將字體移入fonts資料夾中
https://ithelp.ithome.com.tw/upload/images/20231003/20162684GY3R0uHNYT.png

在工作列中找到pubspec.yaml,到裡面做修改如圖
https://ithelp.ithome.com.tw/upload/images/20231003/20162684sGNZAjZfE4.png

這樣設定就完成了!

可以簡單寫個文本的程式碼測試看看

 Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("字體測試"),
        ),
        body: new Center(
          child: new Text(
            'HELLO FLUTTER',
            style: new TextStyle(fontFamily: 'CAI',fontSize: 40),

          ),
        ),
      ),
    );
  }

執行結果可以看到字體變了!
https://ithelp.ithome.com.tw/upload/images/20231003/201626842V70HwPJJS.png


上一篇
Flutter 手勢-滑動刪除
下一篇
路由及導航-頁面跳轉
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言