Flutter：如何更改 AppBar Title 字体？

Question

这是我的第一个 Flutter 应用程序...只是学习和玩弄一下。我想弄清楚如何更改 AppBar 中的标题文本。请注意，body 中的文本发生了变化，但应用栏中的文本没有变化。我在这里完全错了吗？我根据其他 public 关于此主题的堆栈溢出问题使用了此方法。我这边运气不好。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('My First App', style: TextStyle(fontFamily: 'Audowide'),),
      centerTitle: true,
      backgroundColor: Colors.cyan[700],
      brightness: Brightness.dark,
    ),
    body: Center(
      child: Text("Body Text!",
        style: TextStyle(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          fontFamily: 'Audiowide',
          letterSpacing: 2.0,
          color: Colors.grey[500],
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {}, // for later use
      backgroundColor: Colors.cyan[700],
      child: Text("Press"),
    ),
  ),
));

Answer 1

您需要下载字体，并将您的参考资料放在pubspec.yaml。查看文档如何报告： https://flutter.dev/docs/cookbook/design/fonts

Answer 2

您可以尝试以下两种方法之一：

手动将字体添加到项目并在 pubspec.yaml 中定义它们，然后再在项目中使用它们。
另一个有趣的包是 google_fonts，它更简单并且提供了很多您可能想尝试的字体选项。将其添加到您的项目和后续使用的整个过程是 here

Answer 3

第 1 步：修正代码中的拼写错误将 Audowide 更改为 Audiowide
第 2 步：下载 https://fonts.google.com/specimen/Audiowide
第 3 步：将文件放入目录 assets/fonts
第四步：在pubspec.yaml

fonts:
  - family: Audiowide
    fonts:
      - asset: assets/fonts/Audiowide-Regular.ttf

工作演示

Answer 4

您可以在 pubspec.yaml 文件中添加 Google 字体。

dependencies:
  google_fonts: ^1.1.1

在Pubspec.yaml文件中导入依赖

import 'package:google_fonts/google_fonts.dart';

Flutter：如何更改 AppBar Title 字体？

Flutter: How do you change the AppBar Title font?

text

appbar

dart

flutter