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

文章目录

• • 一、前言
  • • 本文重点
    • 版本信息
  • 二、如何在 Flutter 中设置默认字体
  • • 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 学习者一起交流和学习。

来源地址：https://blog.csdn.net/diandianxiyu/article/details/131716165