dart - fontFamily 属性在 flutter 中无法正常工作

标签 dart flutter

我正在尝试更改 flutter 中的 fontFamily 属性以显示具有非默认外观的文本。无论我在 flutter 中分配给 fontfamily 的字体名称如何,默认字体都不会改变(常规字体类型,如 Arial、comic san、Times New Roman、Lucida 等),这里没有任何自定义。我相信像这样微不足道的事情不应该引发这个问题。任何帮助将不胜感激。 以下是我的 flutter 代码:

pubspec.yaml 文件:

name: dramil
description: A new Flutter application.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# Read more about versioning at semver.org.
version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  #dart2_constant: ^1.0.2+dart2
  math_expressions: ^1.0.0
  shared_preferences: ^0.4.3

  material_search: ^0.2.8
  path_provider: '>=0.3.0'
  sqflite: any
  flutter_colorpicker: ^0.2.1
  intl: ^0.15.7
  #auto_size_text: ^0.3.0
  cloud_firestore: ^0.9.5+2
  animated_text_kit: ^1.3.0
  share: ^0.6.0+1
  url_launcher: ^5.0.1
  flutter_launcher_icons: ^0.7.0



dev_dependencies:
  flutter_test:
    sdk: flutter




# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
  - assets/
  - assets/images/
  - assets/icons/launcher_icon.png




  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.io/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.io/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.io/custom-fonts/#from-packages
flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icons/Launcher.png"

这是我尝试更改 fontfamily 属性的片段:

DrawerHeader(
                child: Column(
                  children: <Widget>[
                    Text("The text i am trying to change",style: TextStyle(fontSize: 20,fontFamily: "Arial",color: Colors.yellowAccent),),
                  ],
                ),
                //decoration: BoxDecoration(color: Colors.brown[400],),
                decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [Colors.blueGrey,Colors.orangeAccent],
                      begin: FractionalOffset.topLeft,
                      end: FractionalOffset.bottomRight,
                      stops: [0.0,1.0],
                      tileMode: TileMode.clamp
                  ),

                ),
              ),

最佳答案

Flutter 只有一个默认的 fontFamily,即 Roboto .您在应用中使用的其他 fontFamily 默认情况下不包含在内,并且不会导致任何错误,因为 flutter 使用 fontFamilyFallback当它找不到您指定的 fontFamily 值时。因此,您必须使用以下步骤将自定义字体导入到您的 flutter 项目中:

  • Font.ttf 添加到您的项目 assets 并在您的 pubspec.yaml 文件中定义它:

    fonts:
        - family: Raleway // you can give it any name to call it later
          fonts:
            - asset: Raleway-Regular.ttf //this is the name of the font file you added itside your assets folder
    
  • 运行命令flutter packages get,这样你就可以在项目中使用字体了。

  • 然后您可以包含它并注意样式更改:

        Text("The text i am trying to change",style: TextStyle(fontSize: 20,fontFamily: 'Raleway',color: Colors.yellowAccent),),
    
  • 您可以从google font 下载字体。网站,或者您可以选择使用自定义的。

关于dart - fontFamily 属性在 flutter 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55075834/

相关文章:

requirejs - Dart2js : Is it possible to start Root Isolate from Javascript?

flutter - Flutter SVG仅显示一种颜色

flutter - 异步和等待任务需要太多时间

firebase - Flutter:如何在firebase中删除特定的数组数据

flutter - 如何处理ListView滚动方向

android - Flutter 中的时差 (Dart)

dart - Flutter 如何将数据列表保存到本地存储

android - 最近更新后,pug get 无法正常工作。有任何想法吗?

dart - 从 map 中获取最大值(value)

android - Flutter build apk 有 bug 而 debug 很完美