Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to specify a monospace font in Flutter?

I want to specify a monospace font in a Text widget:

Text("I would like this to be monospace.")

How can I do that? I don’t care about the actual font so long as it is monospace because this is for a developer-only screen.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

As per the official docs, you should:

  1. Import the font files.
  2. Declare the font in the pubspec.
  3. Set a font as the default.
  4. Use a font in a specific widget.

Now I will put these steps from the document here, and you can read the entire document if you want more details:

Step 1:

After you have your fonts ready (ttf for example), you add them to your project directory under the assets folder, for example (from the link above):

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

Step 2:

Declare the font in pubspec.yaml, example:

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

Step 3:

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

In your case, you want to use the font in a specific widget, so you do:

child: Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading