Flutter 自定义字体

在本章中，我们将探讨如何在 Flutter 应用程序中使用自定义字体。通过使用自定义字体，我们可以使应用的 UI 更加独特和吸引人。

引入自定义字体

首先，我们需要将自定义字体文件添加到项目中。通常情况下，字体文件会放在 assets 文件夹中。如果该文件夹不存在，你可以手动创建它。为了便于管理，可以在 assets 文件夹中再创建一个子文件夹来存放字体文件。例如，可以将所有字体文件放在 assets/fonts 目录下。

添加字体文件

假设我们有一个名为 MyCustomFont.ttf 的字体文件，将其放置在 assets/fonts 目录中。

更新 pubspec.yaml 文件

为了让 Flutter 能够识别并加载这些字体文件，需要在 pubspec.yaml 文件中进行相应的配置：

flutter:
  assets:
    - assets/fonts/MyCustomFont.ttf

这里指定了字体文件的路径。保存并运行 flutter pub get 命令，以确保 Flutter 正确加载了资源文件。

在代码中使用自定义字体

接下来，我们需要在应用程序中使用这些自定义字体。为此，我们需要在项目的 TextTheme 中注册新的字体样式。

注册自定义字体

首先，在你的 main.dart 或任何其他入口文件中，使用 GoogleFonts 包来方便地引用字体文件。如果没有安装这个包，可以通过以下命令进行安装：

flutter pub add google_fonts

然后，在你的代码中导入 google_fonts 包，并在 MaterialApp 中设置 theme 属性：

// www.javascriptcn.com code example
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        textTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
      ),
      home: MyHomePage(),
    );
  }
}

这里我们使用了 GoogleFonts.montserratTextTheme() 函数来设置文本主题，但你需要替换为你实际使用的字体名称。

使用自定义字体

在需要使用自定义字体的地方，只需指定相应的 TextStyle 即可：

Text(
  'Hello, World!',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
  ),
)

如果你已经通过 GoogleFonts 设置了全局的字体主题，那么你可以直接使用：

Text(
  'Hello, World!',
)

这样，文本就会自动采用之前设置的自定义字体。

动态更改字体

除了静态设置字体外，还可以根据用户的偏好或应用的状态动态更改字体。这可以通过监听状态变化并在状态改变时更新字体来实现。

示例：基于用户选择的字体

假设我们有一个开关按钮来切换字体类型：

// www.javascriptcn.com code example
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool useCustomFont = false;

  void toggleFont() {
    setState(() {
      useCustomFont = !useCustomFont;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter 自定义字体')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, World!',
              style: useCustomFont
                  ? TextStyle(fontFamily: 'MyCustomFont')
                  : Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: toggleFont,
              child: Text('切换字体'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们添加了一个 ElevatedButton，当用户点击时会切换是否使用自定义字体。

结论

通过上述步骤，你可以轻松地在 Flutter 应用程序中引入和使用自定义字体，从而为你的应用带来更加个性化的设计体验。希望本章对你有所帮助！