flutter如何加载字体fontloaderflutter

在Flutter中如何使用FontLoader加载自定义字体？我按照文档尝试了，但是字体始终没有生效，不知道哪里出了问题。具体步骤是怎样的，需要特别注意哪些地方？希望能提供一个完整的示例，谢谢！

2 回复

在Flutter中加载字体，使用FontLoader类：

  1. 在pubspec.yaml中声明字体文件
  2. 创建FontLoader实例
  3. 调用addFont()添加字体文件
  4. 调用load()异步加载

示例：

FontLoader('MyFont')
  ..addFont(rootBundle.load('assets/myfont.ttf'))
  ..load();

更多关于flutter如何加载字体fontloaderflutter的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，使用 FontLoader 动态加载自定义字体。以下是步骤和示例代码：

步骤：

  1. 准备字体文件：将字体文件（如 .ttf 或 .otf）放在项目的 assets/fonts/ 目录下。
  2. 配置 pubspec.yaml：声明字体资源。
  3. 使用 FontLoader：在代码中动态加载字体。

示例代码：

# pubspec.yaml
flutter:
  assets:
    - assets/fonts/MyCustomFont.ttf

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FontLoaderExample(),
    );
  }
}

class FontLoaderExample extends StatefulWidget {
  @override
  _FontLoaderExampleState createState() => _FontLoaderExampleState();
}

class _FontLoaderExampleState extends State<FontLoaderExample> {
  bool _fontLoaded = false;

  @override
  void initState() {
    super.initState();
    _loadFont();
  }

  Future<void> _loadFont() async {
    final fontLoader = FontLoader('MyCustomFont');
    fontLoader.addFont(rootBundle.load('assets/fonts/MyCustomFont.ttf'));
    await fontLoader.load();
    setState(() {
      _fontLoaded = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FontLoader Example')),
      body: Center(
        child: _fontLoaded
            ? Text(
                'Hello, Custom Font!',
                style: TextStyle(fontFamily: 'MyCustomFont', fontSize: 24),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

说明：

  • FontLoader：通过 addFont 添加字体文件，调用 load() 异步加载。
  • 状态管理：加载完成后更新界面，显示自定义字体。
  • 确保路径正确：rootBundle.load 中的路径需与 pubspec.yaml 中声明的匹配。

使用此方法可在运行时动态加载字体，适用于按需加载场景。

回到顶部