【Flutter学习】文字-自定义字体

Flutter文字通过 Text 组件添加，文字样式通过 TextStyle 设置。要添加自定义字体，首先需要在pubspec.yaml中配置字体文件路径，然后在 TextStyle 的 fontFamily 属性中指定即可。

配置字体文件

首先搞到你想要的字体文件，这里我从自由字体网上随便找了一个字体钉钉进步体，下载后解压将.ttf字体文件放到指定的目录，例如根目录下的fonts目录，然后在pubspec.yaml的flutter.fonts中配置字体文件路径，注意这里的路径是相对于pubspec.yaml的相对路径：

flutter:
  fonts:
    - family: DingTalk
      fonts:
        - asset: fonts/DingTalk JinBuTi.ttf
        - asset: fonts/DingTalk Sans.ttf

这里fonts.family声明了字体名称，在代码中指定字体时就使用该名称。当然可以指定多个字体，这里我只下载了一种就用一种做示例。

然后就可以在代码中直接使用该字体了

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 添加自定义字体'),
        ),
        body: const Center(
          child: Text(
            '汉字最美，Flutter 最牛',
            style: TextStyle(
              fontSize: 48,
              fontFamily: 'DingTalk',
              shadows: [
                BoxShadow(
                  offset: Offset(10, 10),
                  color: Colors.grey,
                  blurRadius: 5
                )
              ]
            ),
          ),
        ));
  }
}

仿照示例，我给文字简单加了个阴影效果，还不错，最终效果如下：

参考

[1]《Flutter 组件详解实战》[加] 王浩然(Bradley Wang) 编著