Flutter fonts tutorial for beginners

Flutter fonts :

Flutter fonts declaration and usage in the app is explained in this part of the tutorial, we will be specifying the default text style and will be using it through out the app code.

Fonts makes the look much beautiful and attractive which in turn makes the user read with much more interest, choosing a font is also a part of the app theme.

You can find these fonts available for free and commercial variants, they are also available in regional languages and global as well.

Modern web browser’s have the support of these fonts previously we need to add fonts of regional languages to be able to read them in website.

Making use of these fonts many news papers publish their e-papers online through websites and mobile app’s as well.

In app fonts are also a part of the app design so that the app overall look is improved with the help of the flutter font used in the app.

Flutter fonts Video Tutorial :

Go through the below tutorial for more details on implementation on flutter fonts.

Project Structure :

The below image depicts the project structure for flutter fonts integration in android studio.

pubspec.yaml :

Specify the flutter fonts in the pubspec file as per the family so that we can use it in the code accordingly

fonts:
  - family: OpenSans
    fonts:
     - asset: assets/fonts/OpenSans-Bold.ttf
       weight: 300
     - asset: assets/fonts/OpenSans-Regular.ttf
       weight: 600

style.dart :

We are specifying the default constants like text sizes, font name, weight and color so that we can use them thorough out the app any where with the help of the style.dart file

import 'package:flutter/material.dart';

const LargeTextSize = 40.0;
const MediumTextSize = 20.0;
const SmallTextSize = 16.0;

const String FontNameDefault = 'OpenSans';

const headline6TextStyle = TextStyle(
    fontFamily: FontNameDefault,
    fontWeight: FontWeight.w300,
    fontSize: LargeTextSize,
    color: Colors.red
);

main.dart :

Initialize with the void main() and consider the default class MyApp()

void main(){
  runApp(MyApp());
}

declare the fonts using ThemeData which we have created in style.dart file

MaterialApp(

  home: HomeScreen(),

  theme: ThemeData(
    textTheme: TextTheme(
      headline6: headline6TextStyle,
    )
  ),
);

Here is the full code for main.dart file

import 'package:flutter/material.dart';
import 'package:flutter_fonts/homescreen.dart';
import 'package:flutter_fonts/style.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      home: HomeScreen(),

      theme: ThemeData(
        textTheme: TextTheme(
          headline6: headline6TextStyle,
        )
      ),
    );
  }
}

homescreen.dart :

Declare a sample text and specify the flutter font for it using style tag inside we provide the theme it should follow.

Center(
    child: Text(
  "Flutter",
  style: Theme.of(context).textTheme.headline6,
)),

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fonts"),
      ),
      body: Center(
          child: Text(
        "Flutter",
        style: Theme.of(context).textTheme.headline6,
      )),
    );
  }
}