【Flutter】Flutter 设置默认字体设置自定义字体

文章目录

一、前言

你是否渴望成为 Flutter 的专家，掌握更多的技巧和最佳实践？我们有个好消息要告诉你！ Flutter 从零到一基础入门到应用上线全攻略 正在等待你的加入！这个专栏包含了你需要的所有 Flutter 学习资源，包括代码示例和深度解析。专栏内容会持续更新，价格也会随之上涨。现在就加入，享受最优惠的价格！此外，我们还有一个专门的讨论群，你可以点击这里 加入我们的讨论群，与其他 Flutter 学习者一起交流和学习。让我们今天就开始 Flutter 的学习之旅吧！

在开发 Flutter 应用时，我们经常需要设置应用的默认字体，以保证应用的视觉一致性。本文将详细介绍如何在 Flutter 中设置默认字体，以及如何使用自定义字体。

本文重点

学习如何在 Flutter 中设置默认字体
了解如何在 Flutter 中使用自定义字体
掌握如何在 Flutter 中实现全局字体设置

版本信息

Flutter 版本：3.10.0 或更高
Dart SDK 版本：3.0.0 或更高

这是小雨青年于 2023 年发布在 CSDN 的博客，由于目前采集站侵权行为猖獗，如果你不是在 CSDN 看到本文，麻烦你通过 CSDN 联系我，谢谢你的支持~

二、如何在 Flutter 中设置默认字体

在 Flutter 中，我们可以通过修改 pubspec.yaml 文件和 MaterialApp 的 theme 属性来设置默认字体。

Flutter 中字体的设置方式

首先，我们需要在 pubspec.yaml 文件中引入字体文件。这里以 Google 的 Roboto 字体为例：

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf
        - asset: fonts/Roboto-Italic.ttf
          style: italic

然后，在 MaterialApp 的 theme 属性中设置默认字体：

MaterialApp(
  theme: ThemeData(
    fontFamily: 'Roboto',
  ),
);

以上代码将应用的默认字体设置为 Roboto。

这里下载谷歌Roboto字体 https://fonts.google.com/specimen/Roboto

全局字体设置的步骤和代码示例

接下来，我们将通过一个具有实际复杂业务逻辑的示例来展示如何在 Flutter 中设置默认字体。在这个示例中，我们将创建一个简单的应用，该应用有两个页面，每个页面都使用了默认字体。

首先，我们创建一个新的 Flutter 项目，并在 lib 目录下创建一个新的 pages 目录。在 pages 目录下，我们创建两个新的 Dart 文件：home_page.dart 和 detail_page.dart。

在 home_page.dart 文件中，我们创建一个 HomePage 类，该类继承自 StatelessWidget：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Text('这是首页'),
      ),
    );
  }
}

在 detail_page.dart 文件中，我们创建一个 DetailPage 类，该类也继承自 StatelessWidget：

import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('详情页'),
      ),
      body: Center(
        child: Text('这是详情页'),
      ),
    );
  }
}

然后，我们在 main.dart 文件中引入这两个页面，并在 MaterialApp 的 theme 属性中设置默认字体：

import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/detail_page.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'Roboto',
      ),
      home: HomePage(),
      routes: {
    
    
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

以上代码将应用的默认字体设置为 Roboto，并创建了两个使用默认字体的页面。

三、在 Flutter 中使用自定义字体

除了使用默认字体，我们还可以在 Flutter 中使用自定义字体。自定义字体可以让我们的应用更具个性，同时也可以满足特殊的设计需求。

自定义字体的引入和使用

首先，我们需要将自定义字体文件添加到项目中。这里我们以一个名为 MyFont 的自定义字体为例。我们将 MyFont.ttf 文件放在项目的 fonts 目录下，然后在 pubspec.yaml 文件中引入该字体：

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: fonts/MyFont.ttf

然后，我们可以在 Text 组件的 style 属性中使用该字体：

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: 'MyFont',
  ),
);

以上代码将文本的字体设置为 MyFont。

自定义字体设置的步骤和代码示例

接下来，我们将通过一个具有实际复杂业务逻辑的示例来展示如何在 Flutter 中使用自定义字体。在这个示例中，我们将创建一个简单的应用，该应用有一个页面，该页面中的部分文本使用了自定义字体。

首先，我们在 pages 目录下创建一个新的 Dart 文件：custom_font_page.dart。

在 custom_font_page.dart 文件中，我们创建一个 CustomFontPage 类，该类继承自 StatelessWidget：

import 'package:flutter/material.dart';

class CustomFontPage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义字体页面'),
      ),
      body: Center(
        child: Text(
          '这是使用了自定义字体的文本',
          style: TextStyle(
            fontFamily: 'MyFont',
          ),
        ),
      ),
    );
  }
}

然后，我们在 main.dart 文件中引入这个页面，并添加一个导航按钮，点击该按钮可以跳转到这个页面：

import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/detail_page.dart';
import 'pages/custom_font_page.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: 'Roboto',
      ),
      home: HomePage(),
      routes: {
    
    
        '/detail': (context) => DetailPage(),
        '/custom_font': (context) => CustomFontPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('这是首页'),
            RaisedButton(
              child: Text('跳转到自定义字体页面'),
              onPressed: () {
    
    
                Navigator.pushNamed(context, '/custom_font');
              },
            ),
          ],
        ),
      ),
    );
  }
}

以上代码创建了一个使用自定义字体的页面，并添加了一个导航按钮，点击该按钮可以跳转到这个页面。

四、总结

本文详细介绍了如何在 Flutter 中设置默认字体，以及如何使用自定义字体。通过设置默认字体，我们可以保证应用的视觉一致性；通过使用自定义字体，我们可以让应用更具个性，同时也可以满足特殊的设计需求。

希望本文能帮助到正在学习 Flutter 的你，如果你有任何问题或建议，欢迎在评论区留言。

这是小雨青年于 2023 年发布在 CSDN 的博客，由于目前采集站侵权行为猖獗，如果你不是在 CSDN 看到本文，麻烦你通过 CSDN 联系我，谢谢你的支持~

你是否对 Flutter 感到好奇，想要深入学习？那么，Flutter 从零到一基础入门到应用上线全攻略 将是你的最佳选择！在这里，你可以找到全面的 Flutter 学习资源，包括代码示例和深度解析。你是否想知道如何用 Flutter 构建应用？所有的答案都在我们的专栏里！别再犹豫了，专栏内容会持续更新，价格也会随之上涨。现在就加入，享受最优惠的价格！让我们一起在 Flutter 的世界中探索吧！想了解更多？点击这里查看 Flutter Developer 101 入门小册专栏指引。此外，我们还有一个专门的讨论群，你可以点击这里 加入我们的讨论群，与其他 Flutter 学习者一起交流和学习。