與其將字型宣告為應用程式(app)的一部分,你也可以將字型宣告為獨立套件(package)的一部分。這是一種方便的方式,可以在多個不同專案間共用相同的字型,或是讓開發者將套件發佈到 pub.dev 上時使用。本教學包含以下步驟:

  1. 將字型新增到套件中。
  2. 將套件與字型加入應用程式。
  3. 使用該字型。

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 來改變文字的外觀。 若要使用套件字型(package fonts),請宣告你想使用的字型名稱,以及該字型所屬的套件。

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'),
        ),
      ),
    );
  }
}

Package Fonts Demo