Flutter在线字体加载插件online_font的使用

在线字体插件online_font

本插件允许你在Flutter应用中使用在线字体。该插件受到了google_fonts的启发。

使用方法

声明字体家族

你可以像这样声明你的字体家族：

class YujiMai extends OnlineFont {
  const YujiMai();

  [@override](/user/override)
  String get fontFamily => 'YujiMai';

  [@override](/user/override)
  Map<FontVariant, FontFile> get fonts => {
    FontVariant.regular: const FontFile(
      url: 'https://fonts.gstatic.com/s/a/d6741e6df72abe0287210735f84bb297fb8704e9e44ae1bd53e9366f75215ce8.ttf',
      // ---------------可选参数---------------
      expectedFileHash: 'd6741e6df72abe0287210735f84bb297fb8704e9e44ae1bd53e9366f75215ce8',
      expectedLength: 7830152,
      extensionName: 'ttf',
      // ---------------可选参数---------------
    ),
  };
}

或者像这样声明：

final yujiMai = RawOnlineFont(fontFamily: 'YujiMai', fonts: _fonts);

使用字体

你可以像这样使用字体：

Text('Hello, world', style: yujiMai.textStyle());
Text('Hello, world', style: const YujiMai().textStyle());

预加载字体

你可以预加载字体，以便在使用时更快地显示：

await yujiMai.loadAll();

// 然后可以这样使用
const Text('Hello, world', style: TextStyle(fontFamily: 'YujiMai-Regular'));
// 如果不关心`const`，可以使用上述方式
Text('Hello, world', style: yujiMai.textStyle());
Text('Hello, world', style: const YujiMai().textStyle());

你也可以只预加载一种字体样式：

await yujiMai.loadVariant(FontVariant.regular);

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用online_font插件：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) => const MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const PreloadExample()),
          ),
          child: Text(
            '点击预加载示例',
            style: const YujiMai().textStyle(
              fontSize: 20,
              color: Colors.orange,
            ),
          ),
        ),
      ),
    );
  }
}

class PreloadExample extends StatefulWidget {
  const PreloadExample({super.key});

  [@override](/user/override)
  State<PreloadExample> createState() => _PreloadExampleState();
}

class _PreloadExampleState extends State<PreloadExample> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 调用此方法将返回一个Future，你可以用它来显示加载指示器或其他内容

    // 你不需要调用`setState`，文本会通过`FontLoader`自动刷新
    yujiMai.loadAll();
    // 或者
    // const YujiMai().loadAll();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () => Navigator.pop(context),
          child: const Text(
            '返回上一页',
            style: TextStyle(fontFamily: 'YujiMai-Regular'),
            // style: TextStyle(
            //   fontFamily: const FontFamilyWithVariant(
            //     family: 'YujiMai',
            //     fontVariant: FontVariant(
            //       fontWeight: FontWeight.w400,
            //       fontStyle: FontStyle.normal,
            //     ),
            //   ).toString(),
            // ),
            // style: yujiMai.textStyle(),
            // style: const YujiMai().textStyle(),
          ),
        ),
      ),
    );
  }
}

final _fonts = {
  FontVariant.regular: const FontFile(
    url:
        'https://fonts.gstatic.com/s/a/d6741e6df72abe0287210735f84bb297fb8704e9e44ae1bd53e9366f75215ce8.ttf',
    expectedFileHash:
        'd6741e6df72abe0287210735f84bb297fb8704e9e44ae1bd53e9366f75215ce8',
    expectedLength: 7830152,
    extensionName: 'ttf',
  ),
};

// 第一种方式
class YujiMai extends OnlineFont {
  const YujiMai();

  [@override](/user/override)
  String get fontFamily => 'YujiMai';

  [@override](/user/override)
  Map<FontVariant, FontFile> get fonts => _fonts;
}

// 第二种方式
final yujiMai = RawOnlineFont(
  fontFamily: 'YujiMai',
  fonts: _fonts,
);