從軟體包匯出字型
如何從包中匯出字型。
你可以將字型宣告為獨立包的一部分，而不是將其宣告為應用的一部分。這是一種在多個不同專案之間共享同一字型的便捷方式，也適合開發者向 pub.dev 釋出自己的包。本指南包含以下步驟：
- 將字型新增到包中。
- 將包和字型新增到應用中。
- 使用字型。
1. 將字型新增到包中
#要從包中匯出字型，你需要將字型檔案匯入到該包專案的 lib 資料夾中。你可以將字型檔案直接放在 lib 資料夾中，或放在子目錄（例如 lib/fonts）中。
在此示例中，假設你有一個名為 awesome_package 的 Flutter 庫，且字型位於 lib/fonts 資料夾中。
awesome_package/
lib/
awesome_package.dart
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf
2. 將包和字型新增到應用中
#現在，你可以透過更新應用根目錄下的 pubspec.yaml 檔案來使用該包中的字型。
將包新增到應用中
#要將 awesome_package 新增為依賴項，請執行 flutter pub add
flutter pub add awesome_package
宣告字型資源
#匯入包之後，需要告知 Flutter 到哪裡查詢 awesome_package 中的字型。
要宣告包字型，請在字型路徑前加上 packages/awesome_package 字首。這會告知 Flutter 去該包的 lib 資料夾中查詢字型。
yaml
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 來更改文字外觀。要使用包中的字型，請宣告你想要使用的字型以及該字型所屬的包。
dart
child: Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(fontFamily: 'Raleway'),
),
完整示例
#字型
#Raleway 和 RobotoMono 字型下載自 Google Fonts。
pubspec.yaml
#
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
#
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'),
),
),
);
}
}
