Yt video:

https://youtu.be/km2P_KQJyO0?si=ottUFsjxytHqr-Gz

To know about the properties available for a widget, keep cursor on the written widget name, then press Ctrl+Q (for android studio. For VS Code, just hover over the written widget)

Code of main.dart | lession 6

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('my first app'),
      centerTitle: true,
      backgroundColor: Colors.red[600]
    ),
    body: Center(
      child: Text(
        'hello, ninjas!',
        style: TextStyle(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          letterSpacing: 2.0,
          color: Colors.grey[600],
          fontFamily: 'IndieFlower',
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.red[600],
      child: Text('click'),
    ),
  ),
));

Adding fonts:

Download fonts from fonts.google.com

Then, make a directory in your project directory, name it fonts.

Drag and drop the font’s .ttf file into the fonts folder.

Now we have to modify the dependencies in pubspec.yaml file.

#NOTE: The indentations are important, and see that indentations are 2 spaces here.

Now see the last of the pubspec.yaml file, the syntax for font is commented, uncomment that ( ctrl+/ )

Accordingly write path, style, family of the font. Use the same font name you gave in the Font Family field in pubspec.yaml file while using it in main.dart file, in fontFamily property of a Text widget.

Screenshot 2024-02-28 164536.png

In pubspec.yaml file:

  fonts:
   - family: IndieFlower
     fonts:
       - asset: fonts/IndieFlower-Regular.ttf

During usage in main.dart :

fontFamily: 'IndieFlower', //Inside Text widget, as a property. 
//See previous code block for Text Widget.