如何在Flutter应用中使用自定义字体

Question

解决方案：

使用Android Studio解决了这个问题！我使用Android Studio运行应用程序，一切正常！看起来VSCode无法很好地应对Custom Fonts。因此，当有人需要添加自定义字体时，我建议使用Android Studio

我正在尝试使用Google字体，名为＆＃34; Great Vibes＆＃34;在我的申请中。

这就是我所做的：

我创建了一个＆＃34;字体＆＃34;根文件夹中的目录
我复制了＆＃34; GreatVibes-Regular.ttf＆＃34;该目录中的文件（从Google字体网站下载）
我在pubspec.yaml（见下文）
当我想使用它时，我在TextStyle

结果：未使用该字体。

fonts:
    - family: GreatVibes
      fonts:
        - asset: fonts/GreatVibes-Regular.ttf
          weight: 400


new Text('My New Font',
            style: new TextStyle(
              color: Colors.white,
              fontFamily: 'GreatVibes',
              fontSize: 16.0,
            )),

未报告错误。我还通过Online YAML parser验证了yaml 这是输出：

{
  "description": "My app", 
  "dependencies": {
    "http": "^0.11.3+16", 
    "shared_preferences": "^0.4.0", 
    "url_launcher": "^2.0.0", 
    "cupertino_icons": "^0.1.0", 
    "image_picker": "^0.4.1", 
    "flutter_facebook_login": "^1.0.3", 
    "flutter_localizations": {
      "sdk": "flutter"
    }, 
    "carousel_slider": "^0.0.4", 
    "connectivity": "^0.3.0", 
    "device_info": "^0.1.2", 
    "intl": "^0.15.5", 
    "font_awesome_flutter": "^7.0.0", 
    "scoped_model": "^0.2.0", 
    "flutter": {
      "sdk": "flutter"
    }, 
    "flutter_webview_plugin": "^0.1.4"
  }, 
  "flutter": {
    "fonts": [
      {
        "fonts": [
          {
            "asset": "fonts/GreatVibes-Regular.ttf", 
            "weight": 400
          }
        ], 
        "family": "GreatVibes"
      }
    ], 
    "assets": [
      "images/avatar.png", 
      "images/logo.png"
    ]
  }, 
  "name": "my_app", 
  "dev_dependencies": {
    "flutter_test": {
      "sdk": "flutter"
    }
  }
}

我还尝试从设备中删除应用并重新安装，但没有任何变化。

你有什么想法吗？

由于

扑医生-v

[√] Flutter (Channel beta, v0.4.4, on Microsoft Windows [Version 10.0.17134.112], locale en-US)
    • Flutter version 0.4.4 at d:\flutter
    • Framework revision f9bb4289e9 (5 weeks ago), 2018-05-11 21:44:54 -0700
    • Engine revision 06afdfe54e
    • Dart version 2.0.0-dev.54.0.flutter-46ab040e58

[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at C:\Users\boeledi\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
    • All Android licenses accepted.

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 25.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[!] VS Code, 64-bit edition (version 1.24.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Dart Code extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code

[√] Connected devices (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

! Doctor found issues in 1 category.

Answer 1

如何在Flutter应用中使用自定义字体

OP表示他们已经解决了他们的问题。这是将来读者的一般答案。

1。在项目中添加字体

右键单击您的项目文件夹，然后转到新建>目录。称为assets。它应该在您的项目根目录中。
将字体复制并粘贴到新的assets目录中。在示例中，我仅使用一种字体，即常规dancing script字体。我将其重命名为dancing_script.ttf。

2。注册字体

打开您的 pubspec.yaml 文件。

在flutter部分下添加字体信息。缩进是强制性的。

flutter:
  fonts:
  - family: DancingScript
    fonts:
    - asset: assets/dancing_script.ttf

3。在主题或小部件中使用字体

现在，可以通过将fontFamily小部件中的TextStyle属性设置为在pubspec.yaml中调用的属性来使用字体。在此示例中，我将其命名为DancingScript。
```
Text(
  'Hello world',
  style: TextStyle(
    fontFamily: 'DancingScript',
  ),
)
```

4。重新启动您的应用

每当我添加资产时，我都需要停止并重新启动。否则我会出错。

注释

阅读documentation以获得更多帮助。

Answer 2

Flutter的google_fonts软件包可让您轻松地在Flutter应用中使用fonts.google.com中的960种字体（及其变体）。

首先，将google_fonts包添加到您的pubspec依赖项中。

要导入GoogleFonts：

import 'package:google_fonts/google_fonts.dart';

要将GoogleFonts与默认的TextStyle一起使用：

Text(
  'This is Google Fonts',
  style: GoogleFonts.girassol(fontSize: 30),
),

简单易用：）

Answer 3

发生错误是因为pubspec.yaml不会自动保存，因此在运行get软件包之前，请关闭pubspec.yaml文件并手动保存，再次运行get软件包，现在应该可以解决问题。

该解决方案适用于Android Studio和VSCode。

Answer 4

“字体”缩进使用不正确：

  fonts:
    - family: GreatVibes
      fonts:
        - asset: fonts/GreatVibes-Regular.ttf
          weight: 400

代替：

fonts:
    - family: GreatVibes
      fonts:
        - asset: fonts/GreatVibes-Regular.ttf
          weight: 400

否则，将仅忽略此行，并且不会引发任何错误。

颤动：自定义字体

4 个答案:

如何在Flutter应用中使用自定义字体

1。在项目中添加字体

2。注册字体

3。在主题或小部件中使用字体

4。重新启动您的应用

注释