以 package 的方式使用字型
自定義字型，除了可以把字型檔作為應用的一部分之外，還可以透過 package 的方式使用，這樣有助於跨專案的字型共享，也可以更方便的發布到 pub.dev。
步驟
-
將字型新增到 package
-
將 package 和字型新增到應用
-
使用字型
1. 將字型新增到 package
透過 package 的方式使用字型，需要將字型檔匯入 package 專案的 lib 資料夾中。你既可以將字型檔直接放在 lib 資料夾中，也可以放在子目錄中，例如 lib/fonts。
在此範例中，假設你已有一個名為 awesome_package 的 library，其中包含了 lib/fonts 資料夾中的字型資源。
awesome_package/
lib/
awesome_package.dart
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf
2. 將 package 和字型新增到應用
現在你可以使用該 package 以及它提供的字型。我們來編輯 應用程式 根目錄下的 pubspec.yaml 檔案。
將 package 新增到應用中
執行 flutter pub add 將 awesome_package 新增為依賴。
$ flutter pub add awesome_package
宣告字型資源
現在已經匯入了 package，你需要告之 Flutter
在 awesome_package 中的哪裡可以找到字型檔。
要想宣告 package 中的字型，必須在 packages/awesome_package 的路徑前加上字型宣告。這將會讓 Flutter 檢索到 lib package 的資料夾中的字型。
flutter:
fonts:
- family: Raleway
fonts:
- asset: packages/awesome_package/fonts/Raleway-Regular.ttf
- asset: packages/awesome_package/fonts/Raleway-Italic.ttf
style: italic
3. 使用字型
你可以使用 TextStyle 來更改文字的外觀。在使用 package 中的字型時，你不僅需要宣告該文字所要使用的字型，還需要宣告字型所屬的 package。
child: Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
),
),完整範例
字型
這裡所使用的 Raleway 和 RobotoMono 字型都是從 Google Fonts 下載的。
pubspec.yaml
name: package_fonts
description: An example of how to use package fonts with Flutter
dependencies:
awesome_package:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
fonts:
- family: Raleway
fonts:
- asset: packages/awesome_package/fonts/Raleway-Regular.ttf
- asset: packages/awesome_package/fonts/Raleway-Italic.ttf
style: italic
uses-material-design: true
main.dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Package Fonts',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
// The AppBar uses the app-default font.
appBar: AppBar(title: const Text('Package Fonts')),
body: const Center(
// This Text widget uses the Raleway font.
child: Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
),
),
),
);
}
}