Flutter网络字体加载插件network_font的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter网络字体加载插件network_font的使用

简介

network_font 插件可以帮助你轻松地从网络加载自定义字体。如果你希望用户可以使用大量的自定义字体，而这些字体又存储在网络中，那么 network_font 插件将帮助你实现这一点，而无需将这些字体文件存储在项目的资产目录中。

该插件受到 google_fonts 和 cached_network_image 的启发。

开始使用

工作原理

基本上，network_font 的工作原理类似于 cached_network_image。如果用户的缓存目录中不存在或已过期的字体文件，此插件将从网络下载并存储到用户的缓存目录中。

工作流程

使用方法

  1. 导入 network_font

    import 'package:network_font/network_font.dart';

  2. 声明网络字体数据

    final NetworkFont _networkFont = NetworkFont('family', url: 'font_url');

  3. 使用 network_font

    有三种方式可以使用 network_font：

    • NetworkFontText Widget

      NetworkFontText(
  'NetworkFontText Widget',
  font: _networkFont,
  style: TextStyle(fontSize: 18),
),

    • NetworkFont 的样式

      Text(
  'NetworkFont Style',
  style: _networkFont.style(fontSize: 18),
),

    • TextStyle 的 network_font 扩展

      Text(
  'NetworkFont Extension',
  style: TextStyle(fontSize: 18).network(_networkFont),
),

    这三种方式在技术上没有区别，只是代码风格不同。

其他功能

initFont

允许你在应用中初始化网络字体。

此函数将从缓存中读取字体数据。如果字体数据 不存在 或 已过期，此函数将从 fontData.url 下载并存储到用户的缓存目录中。此外，此操作具有不必要的初始化检查器，因此对同一 fontData 多次调用 initFont 不会重复执行。

import 'package:network_font/network_font.dart';

final NetworkFont _networkFont = NetworkFont('family', url: 'font_url');

@override
void initState() {
  FontFunction.instance.initFont(_networkFont);
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Text(
    'Example Text',
    style: TextStyle(fontFamily: _networkFont.family),
  );
}

注意：目前仅支持 OpenType (OTF) 和 TrueType (TTF) 字体。

setExpiredDuration

设置缓存字体的过期时间。

默认为 30 天。

final DateTime _oneWeek = const Duration(days: 7);

FontFunction.instance.setExpiredDuration(_oneWeek);

注意：你应该在调用 initFont 之前调用此方法。

示例代码

以下是一个完整的示例代码，展示了如何使用 network_font 插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NetworkFontExample App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NetworkFontExample(),
    );
  }
}

class NetworkFontExample extends StatefulWidget {
  @override
  _NetworkFontExampleState createState() => _NetworkFontExampleState();
}

class _NetworkFontExampleState extends State<NetworkFontExample> {
  int _index = 0;
  final List<NetworkFont> _list = [
    NetworkFont('Quicksand', url: 'https://firebasestorage.googleapis.com/v0/b/banna-fe7c8.appspot.com/o/fonts%2FQuicksand-Regular.ttf?alt=media&token=7def3227-6f6d-45de-9b74-aab262754d6d'),
    NetworkFont('AksiMosi', url: 'https://firebasestorage.googleapis.com/v0/b/banna-fe7c8.appspot.com/o/fonts%2FAksiMosi-0WK1v.ttf?alt=media&token=2cd2d109-bff7-400f-be16-6efcdd8762b3'),
    NetworkFont('CocoBold', url: 'https://firebasestorage.googleapis.com/v0/b/banna-fe7c8.appspot.com/o/fonts%2FCocoBold-YzEZa.otf?alt=media&token=9811befe-8757-4f46-b626-71de8c1bbbc2'),
    NetworkFont('Colombia', url: 'https://firebasestorage.googleapis.com/v0/b/banna-fe7c8.appspot.com/o/fonts%2FColombia-Rp0DV.ttf?alt=media&token=a1a3d435-6227-402f-8233-3c3f586c8d5c'),
    NetworkFont('HuntingStar', url: 'https://firebasestorage.googleapis.com/v0/b/banna-fe7c8.appspot.com/o/fonts%2FHuntingStar-gxBK1.ttf?alt=media&token=df4059e4-2a8b-4f20-bd21-4936d0707c68'),
  ];

  @override
  void initState() {
    super.initState();
    for (var font in _list) {
      FontFunction.instance.initFont(font);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _list[_index].family,
              style: TextStyle(fontSize: 27),
            ),
            SizedBox(height: 32),
            Text('NetworkFont Style', style: _list[_index].style(fontSize: 18)),
            Text(
              'NetworkFont Extension',
              style: TextStyle(fontSize: 18).network(_list[_index]),
            ),
            NetworkFontText(
              'NetworkFontText Widget',
              font: _list[_index],
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () => setState(() => _index = (_index + 1) % _list.length),
              child: Text('Change Font'),
            ),
          ],
        ),
      ),
    );
  }
}

加入 Flutter 社区


更多关于Flutter网络字体加载插件network_font的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter网络字体加载插件network_font的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用network_font插件来加载网络字体的示例代码。首先，你需要确保在pubspec.yaml文件中添加network_font依赖项：

dependencies:
  flutter:
    sdk: flutter
  network_font: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖项。

接下来是完整的示例代码，展示如何在Flutter应用中使用network_font加载网络字体：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Font Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 网络字体的URL
    final String fontUrl = 'https://example.com/path/to/your/font.woff2';

    // 使用NetworkFontProvider加载网络字体
    final TextStyle networkTextStyle = TextStyle(
      fontFamily: NetworkFontProvider(fontUrl).fontFamily,
      fontSize: 24,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Network Font Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is a text with network font.',
              style: networkTextStyle,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 示例：动态更改字体URL
                setState(() {
                  fontUrl == 'https://example.com/path/to/your/font.woff2'
                      ? fontUrl = 'https://example.com/path/to/another/font.woff2'
                      : fontUrl = 'https://example.com/path/to/your/font.woff2';
                  // 由于fontFamily在构建时确定，这里需要重新构建TextStyle
                  networkTextStyle = TextStyle(
                    fontFamily: NetworkFontProvider(fontUrl).fontFamily,
                    fontSize: 24,
                  );
                });
              },
              child: Text('Change Font'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们首先定义了一个网络字体的URL，然后使用NetworkFontProvider来加载该字体。注意，由于NetworkFontProvider的fontFamily属性在构建时确定，因此如果你需要动态更改字体，你需要在setState中更新整个TextStyle对象。

请注意，由于字体加载是从网络进行的，因此在字体实际加载之前，文本可能会使用默认字体显示。此外，确保你的网络字体URL是有效的，并且字体文件支持你的应用所需的字符集。

这个示例展示了基本的用法，你可以根据需要进一步扩展和定制。

回到顶部