如何更改Flutter中的默认字体系列

Question

How can I change every text of my app to use a specific font? I can change them individually by using the TextStyle() but how can I make my app default to a specific font? Can you show me how?

Answer 1

You can change the default font family of your Flutter app by following the below steps:

1. Add your font files into your project folder. Say Project Folder > assets > fonts > hind .

2. Declare the font family with font files with style in your project's pubspec.yaml file as (An example):

3. In the MaterialApp widget of your main class file, define the default font family as:

Answer 2

Flutter works with custom fonts and you can apply a custom font across an entire app or to individual widgets. This recipe creates an app that uses custom fonts with the following steps:

1. Import the font files

To work with a font, import the font files into the project. It's common practice to put font files in a fonts or assets folder at the root of a Flutter project.

For example, to import the Raleway and Roboto Mono font files into a project, the folder structure might look like this:

   awesome_app/
     fonts/
       Raleway-Regular.ttf
       Raleway-Italic.ttf
       RobotoMono-Regular.ttf
       RobotoMono-Bold.ttf

2. Declare the font in the pubspec Once you've identified a font, tell Flutter where to find it. You can do this by including a font definition in the pubspec.yaml file.

   flutter:
     fonts:
       - family: Raleway
         fonts:
           - asset: fonts/Raleway-Regular.ttf
           - asset: fonts/Raleway-Italic.ttf
             style: italic

3. Set a font as the default You have two options for how to apply fonts to text: as the default font or only within specific widgets.

To use a font as the default, set the fontFamily property as part of the app's theme . The value provided to fontFamily must match the family name declared in the pubspec.yaml .

   MaterialApp(
     title: 'Custom Fonts',
     // Set Raleway as the default app font.
     theme: ThemeData(fontFamily: 'Raleway'),
     home: MyHomePage(),
   );

4. Use the font in a specific widget

   Text(
     'Roboto Mono sample',
     style: TextStyle(fontFamily: 'RobotoMono'),
   );

Complete example pubspec.yaml

name: custom_fonts
description: An example of how to use custom fonts with Flutter

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700
  uses-material-design: true

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: Text('Custom Fonts')),
      body: Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}

Answer 3

If you want to use one of these Google fonts then use the official google_fonts package.

• add to pubspec.yaml

dependencies:
  google_fonts: ^2.1.0 

• Override the default font like this

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);