Flutter动态缓存字体插件dynamic_cached_fonts的使用

Dynamic Cached Fonts

Dynamic Cached Fonts 是一个简单易用且可定制的字体加载器，用于加载网络字体。

🚀 演示

• 在线演示
• 

👋 介绍

Dynamic Cached Fonts 允许您从任何 URL 动态加载字体并缓存它。这样可以减少应用包大小，并在需要时加载字体。

另一个优势是您可以轻松提供用户选择应用字体的选项，从而实现更高的自定义程度。缓存是一个性能提升，因为字体只会下载一次并多次使用，减少了网络和电池消耗。

🏃 开始使用

要使用此插件，请将 dynamic_cached_fonts 添加为依赖项。

dependencies:
  dynamic_cached_fonts: ^latest_version

⚒️ 使用方法

按需加载字体

页面加载时加载字体

@override
void initState() {
  final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts(
    fontFamily: fontFamilyName, // 字体家族名称
    url: fontUrl, // 字体文件的URL (.ttf 或 .otf 文件)
  );
  dynamicCachedFont.load(); // 下载、缓存并加载字体

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

自定义缓存设置

DynamicCachedFonts(
  fontFamily: fontFamilyName,
  url: fontUrl,
  maxCacheObjects: 150, // 设置最大缓存对象数量
  cacheStalePeriod: const Duration(days: 100), // 设置缓存过期时间
);

加载多个字体（同一家族）

DynamicCachedFonts.family(
  urls: <String>[
    fontFamilyNameBoldUrl,
    fontFamilyNameItalicUrl,
    fontFamilyNameRegularUrl,
    fontFamilyNameThinUrl,
  ],
  fontFamily: fontFamilyName,
);

使用 Stream 加载字体

final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts(
  fontFamily: fontFamilyName,
  url: fontUrl,
);

dynamicCachedFont.loadStream(
  itemCountProgressListener: (double progress, int totalItems, int downloadedItems) {},
  downloadProgressListener: (DownloadProgress progress) {},
);

静态方法

缓存字体

onPressed: () {
  DynamicCachedFonts.cacheFont(fontUrl);
},
child: const Text('Download font'),

检查字体是否已缓存

if(DynamicCachedFonts.canLoadFont(fontUrl)) {
  DynamicCachedFonts.loadCachedFont(
    fontUrl,
    fontFamily: fontFamilyName,
  );
}

删除缓存字体

DynamicCachedFonts.removeCachedFont(fontUrl);

Firebase Cloud Storage 加载字体

DynamicCachedFonts.fromFirebase(
  fontFamily: fontFamilyName,
  url: 'gs://your-bucket-name/path/to/font.ttf',
);

完整示例

import 'package:dynamic_cached_fonts/dynamic_cached_fonts.dart';
import 'package:flutter/material.dart';

void main() {
  DynamicCachedFonts.toggleVerboseLogging(true);

  runApp(
    MaterialApp(
      title: 'Dynamic Cached Fonts Demo',
      home: const DynamicCachedFontsDemo(),
      darkTheme: ThemeData.dark(),
    ),
  );
}

class DynamicCachedFontsDemo extends StatefulWidget {
  const DynamicCachedFontsDemo({Key? key}) : super(key: key);

  @override
  State<DynamicCachedFontsDemo> createState() => _DynamicCachedFontsDemoState();
}

class _DynamicCachedFontsDemoState extends State<DynamicCachedFontsDemo> {
  final String fontFamilyName = 'CascadiaCode';
  final String fontUrl = 'https://example.com/path/to/CascadiaCode.ttf';

  @override
  void initState() {
    final DynamicCachedFonts dynamicCachedFont = DynamicCachedFonts(
      fontFamily: fontFamilyName,
      url: fontUrl,
    );
    dynamicCachedFont.load();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dynamic Cached Fonts Demo'),
      ),
      body: Center(
        child: Text(
          'The text is being displayed in $fontFamilyName which is being dynamically loaded and cached',
          style: TextStyle(fontFamily: fontFamilyName),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 这里可以添加更多逻辑，例如加载其他字体或导航到其他页面
        },
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

🐛 Bug 报告与帮助

如果您发现 bug，请在 GitHub 上提交问题。如果您需要帮助，可以在 GitHub Discussions 上讨论！

💁 贡献

欢迎贡献代码！请 fork 仓库并提交 pull request。更多信息请参考 贡献指南。

希望这些信息对您有所帮助！如果有任何问题，欢迎随时提问。