fontFamily property not working properly in flutter

Question

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
                  ),

                ),
              ),

Answer 1

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.