简体   繁体   中英

fontFamily property not working properly in flutter

i am trying to change the fontFamily property in flutter to display a text with an appearance other than the default. No matter the font name i assign to the fontfamily in flutter, the default font does not change(regular font types like Arial, comic san, Times New Roman, Lucida, etc.), Nothing custom here. i believe something as trivial as this should not be throwing this issue. Any help will be appreciated. The following are my flutter codes:

pubspec.yaml file:

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"

This is the snippet of where i am trying to change the fontfamily property:

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 has only one default fontFamily which is Roboto . The other fontFamily you are using in your app aren't included by default and it is not causing any errors because flutter use a fontFamilyFallback when it can't find the fontFamily value you specified. So you have to import your custom font to you flutter project using the following steps:

  • Add the Font.ttf to your project assets and this define it in your pubspec.yaml file:

     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 
  • Run the command flutter packages get so you can use the font inside the project.

  • Then you can include it and notice style change:

      Text("The text i am trying to change",style: TextStyle(fontSize: 20,fontFamily: 'Raleway',color: Colors.yellowAccent),), 
  • You can download fonts from the google font website or you can opt to use your custom ones.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM