アプリの一部としてフォントを宣言するのではなく、別のパッケージの一部としてフォントを宣言することができます。これは、複数の異なるプロジェクトで同じフォントを共有したり、pub.devにパッケージを公開するコーダーにとって便利な方法です。
１．パッケージへのフォントの追加
パッケージからフォントをエクスポートするには、フォントファイルをパッケージプロジェクトの lib フォルダにインポートする必要があります。フォントファイルはlibフォルダに直接置くことも、lib/fontsのようなサブディレクトリに置くこともできます。
Dart
￥awesome_package/
￥lib/
￥awesome_package.dart
￥fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf２．アプリへのパッケージとフォントの追加
これで、アプリのルートディレクトリにあるpubspec.yamlを更新することで、パッケージ内のフォントを使用できるようになります。
（１）アプリへのパッケージの追加
Dart
> flutter pub add awesome_package（２）フォントアセットの宣言
パッケージをインポートしたので、awesome_packageのフォントがどこにあるかをFlutterに設定します。
パッケージフォントを宣言するには、フォントへのパスの前にpackages/awesome_packageをつけます。
これはFlutterにパッケージのlibフォルダからフォントを探すように指示します。
（pubspec.yaml）フォントアセットの宣言の例：
flutter:
fonts:
- family: Raleway
fonts:
- asset: packages/awesome_package/fonts/Raleway-Regular.ttf
- asset: packages/awesome_package/fonts/Raleway-Italic.ttf
style: italic３．フォントの利用
テキストの外観を変更するには、TextStyleを使用します。 パッケージ・フォントを使用するには、使用したいフォントと、そのフォントがどのパッケージに属しているかを宣言します。
TextStyleを設定してフォントを利用する例：
child: Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
),
),４．サンプル
（１）フォント
RalewayとRobotoMonoフォントはGoogle Fontsからダウンロードします。
（２）pubspec.yaml
Dart
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',
),
),
),
);
}
}