Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
in Flutter Widgets, Material Design
3 min read
custom fonts text style flutter

Have you been looking for ways to understand test styling and custom fonts in Flutter? Here’s an easy step by step guide on how you can style your text in Flutter.

RELATED FLUTTER RESOURCES

A Contextual Action/App Bar Implementation for Flutter

A Flutter App for Tracking Funds/Money – Budget Tracker

How To Add a Backdrop in Flutter (Material Design)

There are different ways regarding the appearance of Text: TextStyle and Custom Fonts. We’ll deal with these in this post, as do well to read to the end, as You’ll better understand text theming, and ways of which you can style your text in Flutter to birth a beautiful UI. Firstly, let’s talk about;

ADVERTISEMENT

TextStyle

Text widgets have a style property which takes a TextStyle() object. See an example in the image below;

A “Hello World” text with TextStyle() and another “Hello World” text without TextStyle()

You’ll simply set the style property to an instance of a TextStyle widget and set properties. The TextStyle in Flutter supports about 20 properties. Here are the most useful:

  • color – Any of the valid 16+ million colors
  • decoration – TextDecoration.underline, overline, strikethrough, none
  • fontSize – A double. The number of pixels tall to make the characters. Default size 14.0 pixels
  • fontStyle – FontStyle.italic or normal
  • fontWeight – FontWeight.w100-w900. Or bold (which is w700) or normal (which is w400)
  • fontFamily – A string

The fontFamily is a bigger topic. There are some fonts that are built-in like Courier, Times New Roman, serif, and a bunch more. How many more? It depends on the type of device on which the app is running. Since we don’t have control over the users’ devices, the best practice is for you to stick to the default font family unless you install and use a custom font. Let’s talk about how to do that.

Custom Fonts

Certain designers call for custom fonts when they design scenes. It turns out with Flutter, using custom fonts is easy to implement, and they work cross-platform. It involves three steps:

  1. Download the custom font files which are in ttf, woff, or woff2 format. These are customarily stored in a root-level folder called fonts, but the name is up to you.
Fonts are usually stored in a folder called fonts

You may be asking, Where can I get amazing fonts? You can find some excellent and free fonts at https://fonts.google.com. Search through them by type, see samples, and download them easily. Now, How do you add Custom Fonts in Flutter.

  1. Add the font files to the pubspec.yaml file under flutter/fonts so that the compiler is notified to bundle them in the installation file.
flutter:
  fonts:
     - family: MrDafoe
       fonts:
        - asset: fonts/MrDafoe-Regular.ttf
     - family: NanumBrushScript
       fonts:
        - asset: fonts/NanumBrushScript-Regular.ttf
  1. Use the case-insensitive font name in the fontFamily property of the TextStyle widget as it helps understand your code better. Here’s how you can apply the font in your text
Text(loremIpsums[0]), // Unstyled
Text(loremIpsums[1], // Some, like Courier may be built-in
style: TextStyle(fontFamily: 'Courier'),),
Text(loremIpsums[2],
style: TextStyle(fontFamily: 'NanumBrushScript'),),
Text(loremIpsums[3],
style: TextStyle(fontFamily: 'MrDafoe'),),
Available fonts

RelatedFlutter Resource

A Contextual Action/App Bar Implementation for Flutter
App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
A Flutter App for Tracking Funds/Money – Budget Tracker
Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
backdrops flutter
Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
Next Post
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton

All Flutter Buttons - [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

Flutter Form & FormField Widget - Implementation & Example

Flutter Form & FormField Widget - Implementation & Example

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Music Mp3 Streaming and Downloading App made with Flutter

A Music Mp3 Streaming and Downloading App made with Flutter

August 16, 2020
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
add flutter image to app

Image Widget – Everything You Need To Know

July 12, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • How to use the Flutter Text Field and Input Widget

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In