Customizing fonts in Flutter
| |

Customizing fonts in Flutter

Byadmin

To make their Customizing fonts app stand out, increase brand recognition, and create a better product overall, designers and developers love to use custom fonts in Flutter.

The Android and iOS default font families are Roboto and San Francisco, respectively. You may have a font that a designer made specifically for you, or you may have found one online and downloaded it, such as from Google Fonts. In any case, you’ll need to import the font file (.ttf) into your Flutter project after downloading it.

By building a simple Flutter app that shows texts in several font styles, you’ll discover how to customize fonts in Flutter for your project.

Why Customizing Fonts in Flutter

Designers still desire the ability to use their own fonts, even if the system fonts on Android and iOS are top-notch. Maybe you have a font that a designer made specifically for you, or maybe you found one on Google Fonts and downloaded it.

Understanding Typography in Flutter

The various shapes and symbols that make up a particular kind of typography are called glyphs. A typeface’s font is a specific instance of that typeface in a specified weight or variation. There is a font called Roboto Bold and a typeface called Roboto.

With Flutter dialog, you may change the font of an entire app or just certain widgets. Following these methods, you can make an app that employs your own fonts.

Basic Font of the Flutter App

All things are widgets in the Flutter framework in Customizing fonts. Thus, “Text” is also a widget. Font style, font size, font weight, and other widget-specific characteristics are available to the text widget. Prior to simplifying the app-creation process, the Flutter team has established certain default attributes. So, changing these parameters to produce the appropriate outcome is all it takes to customize text.

import 'package:flutter/material.dart';

// function to trigger the app build

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

// creating StatelessWidget

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

// building widgets

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text('helloworld'),

backgroundColor: Colors.green,

),

body: const SafeArea(

child: Center(

child: Text(

'hieveryone!',

style: TextStyle(

fontSize: 40.0,

color: Colors.green,

fontWeight: FontWeight.bold), //TextStyle

), // Text

), // Center

), //SafeArea

), //Scaffold

); //MaterialApp

}

}

Custom Fonts in Flutter

Pick a Customizing fonts .

Picking a font shouldn’t be a personal choice. Think about the font’s potential impact on design choices and app performance, as well as the file formats that are compatible with Flutter.

Choose a font format that is compatible.

Here are the font formats that Flutter is compatible with:

  • OpenType font collection:.ttc
  • The TrueType font: .ttf
  • Fonts in OpenType format: .otf

Fonts saved in the Web Open Font Format (.woff and.woff2) are not compatible with Flutter on desktop computers.

Get the Font Files and Open Them



Save the font file (.ttf is the most common extension) to your computer.

In your Flutter project, locate the assets/fonts/ directory and paste the font file there. If this directory doesn’t already exist, you may have to create it.

Update pubspec.yaml:

Open the pubspec.yaml file in your project.

Under the flutter section, specify the path to your font file. For example:

fonts:

  - family: CustomFont

    fonts:

      - asset: assets/fonts/CustomFont-Regular.ttf

      - asset: assets/fonts/CustomFont-Bold.ttf

        weight: 700



The family is the name you will use in your code to refer to the font, and asset refers to the location of the font file.

Use the Font in Your App



To apply the Customizing fonts font globally, modify your TextTheme within the ThemeData:

theme: ThemeData(
  fontFamily: 'CustomFont',
  textTheme: TextTheme(
    bodyText1: TextStyle(fontSize: 18.0, fontFamily: 'CustomFont'),
  ),
),

To apply the font to a specific widget, use the TextStyle class:

Text(
  'Hello, Flutter!',
  style: TextStyle(fontFamily: 'CustomFont', fontSize: 24, fontWeight: FontWeight.bold),
),

The final code, after Customizing fonts & the text style, is as follows

import 'package:flutter/material.dart';

// Function to trigger the app build

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

// Creating StatelessWidget

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  // Building widgets

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(

        fontFamily: 'CustomFont', // Applying the custom font globally

        textTheme: const TextTheme(

          bodyText1: TextStyle(fontSize: 18.0),

        ),

      ),

      home: Scaffold(

        appBar: AppBar(

          title: const Text('helloworld'),

          backgroundColor: Colors.green,

        ),

        body: const SafeArea(

          child: Center(

            child: Text(

              'HIEVERYONE!',

              style: TextStyle(

                fontSize: 40.0,

                color: Colors.green,

                fontWeight: FontWeight.bold,

              ), // Customizing fonts style for this specific text

            ), // Text

          ), // Center

        ), // SafeArea

      ), // Scaffold

    ); // MaterialApp

  }

}

Conclusion

One of the best ways to make your Flutter app Customizing fonts stand out, make your brand more accurate, and improve the user experience is to change the theme and use custom fonts. The goal should be to make a good looking app as well in addition to being effective. After you learn the basics of adding custom fonts to your app, it’s time to show off your creativity and make your app truly unique.

Similar Posts