シンプルで使いやすく、カスタマイズ可能なフォントローダーは、Webフォントを使用しています。
デモ:https://sidrao2006.github.io/dynamic_cached_fonts
動的キャッシュフォントを使用すると、任意のURLからフォントを動的にロードしてキャッシュできます。これにより、バンドルサイズを縮小し、必要に応じてフォントをロードできます。
フォントを動的にロードするもう1つの利点は、ユーザーにアプリフォントを選択するオプションを簡単に提供できることです。これにより、より多くのレベルのカスタマイズが可能になります。
キャッシングは、フォントが一度だけダウンロードされ、複数回使用され、ネットワークとバッテリーの使用量を削減するため、パフォーマンスのアップグレードが追加されています。
パッケージを使用するには、 dynamic_cached_fonts依存関係として追加します。
たとえば、ページがロードされたときなど、フォントをオンデマンドでロードできます。
@override
void initState () {
final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
fontFamily : fontFamilyName, // The font family name to be passed to TextStyle.fontFamily
url : fontUrl, // A valid url pointing to a font file (.ttf or .otf files only)
);
dynamicCachedFont. load (); // Downloads the font, caches and loads it.
super . initState ();
}
...
Text (
'Some Text' ,
style : TextStyle (fontFamily : fontFamilyName),
)または、ボタンがクリックされたとき
ElevatedButton (
onPressed : () {
final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
fontFamily : fontFamilyName,
url : fontUrl,
);
dynamicCachedFont. load ();
},
child : const Text ( 'Load Font' ),
),キャッシュの大きさを変更したい場合、またはフォントがキャッシュにとどまる時間を変更する場合は、 maxCacheObjectsとcacheStalePeriodで通過します。
DynamicCachedFonts (
fontFamily : fontFamilyName,
url : fontUrl,
maxCacheObjects : 150 ,
cacheStalePeriod : const Duration (days : 100 ),
); TextStyle.fontFamily sはload()が呼び出された後にのみ適用されます。
load()複数回呼び出すと、StateErrorがスローされます
さまざまなウェイトとスタイルの複数のフォントを単一のファミリーとしてロードする必要がある場合はどうなりますか...そのために、 DynamicCachedFonts.familyコンストラクターを使用できます。
URLと同じファミリの異なるフォントを指して、 urlsのリストを受け入れます。
DynamicCachedFonts . family (
urls : < String > [
fontFamilyNameBoldUrl,
fontFamilyNameItalicUrl,
fontFamilyNameRegularUrl,
fontFamilyNameThinUrl,
],
fontFamily : fontFamilyName,
);パッケージは、フォントをStreamとしてロードすることもサポートしています! loadStream 、フォントファイルを発する単一のサブスクリプションストリームを返します。
loadStream 、CallBack downloadProgressListenerを受け入れます。これは、 DownloadProgressイベントを受信するたびに呼び出されます。これは、フォントが実際に提供されたURLからダウンロードされている場合にのみ発生します。通常、キャッシュから提供されるその後のリクエストは、進捗イベントを発生させません。フォントファイルの有効期限が切れた場合、ファイルは再びダウンロードされ、そのために進行状況イベントがストリーミングされ、ProgressListenerをdownloadProgressListener 。
loadStream単一のフォントURLで呼び出されると、 itemCountProgressListenerは、フォントがエンジンにロードされたときに1回のみ呼び出されます。
final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts (
fontFamily : fontFamilyName,
url : fontUrl,
);
dynamicCachedFont. loadStream (
itemCountProgressListener : ( double progress, int totalItems, int downloadedItems) {},
downloadProgressListener : ( DownloadProgress progress) {},
); loadStreamを使用してフォントファミリ全体をロードすると、 itemCountProgressListenerファミリのすべてのフォントに対して1回呼び出されます。以下の例では、 itemCountProgressListener 、すべてのフォントがフラッターエンジンにロードされた後に1回、4回呼び出されます。
final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts . family (
urls : < String > [
fontFamilyNameBoldUrl,
fontFamilyNameItalicUrl,
fontFamilyNameRegularUrl,
fontFamilyNameThinUrl,
],
fontFamily : fontFamilyName,
);
dynamicCachedFont. loadStream (
itemCountProgressListener : ( double progress, int totalItems, int downloadedItems) {},
downloadProgressListener : ( DownloadProgress progress) {},
);
loadStream複数回呼び出すと、StateErrorがスローされます
さらにコントロールが必要な場合は、静的方法を使用してください!
cacheFont onPressed : () {
DynamicCachedFonts . cacheFont (fontUrl);
},
child : const Text ( 'Download font' ),ここでもmaxCacheObjectsとcacheStalePeriodを渡すことができます。
canLoadFont 、 loadCachedFont 、 loadCachedFamily canLoadFontは、フォントがキャッシュで使用できるかどうかを確認するために使用されます。通常、 loadCached*メソッドと組み合わせて使用されます。
まず、フォントがすでにキャッシュ中かどうかを確認します。もしそうなら、フォントをロードします。
if ( DynamicCachedFonts . canLoadFont (fontUrl)) {
// To load a single font...
DynamicCachedFonts . loadCachedFont (
fontUrl,
fontFamily : fontFamilyName,
);
// Or if you want to load multiple fonts as a family...
DynamicCachedFonts . loadCachedFamily (
< String > [
fontFamilyNameBoldUrl,
fontFamilyNameItalicUrl,
fontFamilyNameRegularUrl,
fontFamilyNameThinUrl,
],
fontFamily : fontFamilyName,
);
}これで、フォントがキャッシュで使用できない場合は、ダウンロードしてください!
if ( DynamicCachedFonts . canLoadFont (fontUrl)) {
...
} else {
DynamicCachedFonts . cacheFont (fontUrl);
}cacheFontStream cacheFontStreamは、フォントのダウンロードとキャッシュに使用されます。この方法はcacheFontに似ていますが、ダウンロードの進行状況を放出する単一のサブスクリプションStreamを返します。ダウンロードは、 DownloadProgressイベントを受信するたびに呼び出されるprogressListenerコールバックにストリーミングされます。これは、フォントが実際に提供されたURLからダウンロードされている場合にのみ発生します。通常、キャッシュから提供されるその後のリクエストは、進捗イベントを発生させません。フォントファイルの有効期限が切れた場合、ファイルは再びダウンロードされ、そのために進行状況イベントがストリーミングされ、ProgressListenerをdownloadProgressListener 。
DynamicCachedFonts . cacheFontStream (
fontUrl,
progressListener : ( DownloadProgress progress) {},
);loadCachedFamilyStream canLoadFontを使用して、フォントがキャッシュで使用できるかどうかを確認します。
loadCachedFamilyStreamを使用して、単一のフォントファミリとして複数のフォントをフラッターエンジンにロードします。この方法はloadCachedFamilyに似ていますが、ストリームを返します。
loadCachedFamilyStreamが単一のフォントURLで呼び出されると、フォントがエンジンにロードされたときにprogressListener 1回のみ呼び出されます。
また、 loadCachedFamilyStreamを使用してフォントファミリ全体をロードすると、Familyのすべてのフォントに対してprogressListener 1回呼び出されます。以下の例では、すべてのフォントがフラッターエンジンにロードされた後に、 progressListenerが4回呼ばれます。
DynamicCachedFonts . loadCachedFamilyStream (
< String > [
fontFamilyNameBoldUrl,
fontFamilyNameItalicUrl,
fontFamilyNameRegularUrl,
fontFamilyNameThinUrl,
],
fontFamily : fontFamilyName,
progressListener : ( double progress, int totalItems, int downloadedItems) {},
);removeCachedFontキャッシュからフォントを永続的に削除するには、 removeCachedFont使用します。
注 - これは、完全なアプリが再起動するまですぐにフォントを変更しません。
最後に、実装をカスタマイズする場合は、 RawDynamicCachedFontsを拡張し、静的メソッドをオーバーライドします。
FireBaseクラウドストレージからロードするカスタムフォントがありますか? DynamicCachedFonts.fromFirebase Constructorを使用してください! gs://から始まるURLであるGoogleクラウドストレージの場所を受け入れます。それ以外は、デフォルトのコンストラクターに似ています。
ヒント:
DynamicCachedFonts.toggleVerboseLoggingを使用して、詳細なステータスとデバッグの構成を記録します。
バグが見つかった場合は、GitHubで問題を開いたり、ヘルプが必要な場合は、GitHubディスカッションについて話し合いましょう。
物事を簡単にするために、Docker Composeを使用して開発環境をセットアップできます。 Run docker compose run linux作成するか、Linux開発環境をセットアップするためにRun docker compose run windows作成します。
Docker Windows環境をセットアップできるようにするには、Windowsマシンにいる必要があります。
パッケージに貢献するには、リポジトリをフォークし、プルリクエストを開きます!