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)
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'),
),
),
));
For adding widgets inside Center widget, we must define that inner widget as child property.
Generally, to add one widget inside another, we must specify the inner widget as a property of the the outer widget, so the corresponding property is child.
body: Center(
child: Text(
'hello, ninjas!')) //Center
For the properties of the Text widget, we specify the text to be written as the first property without any designation, and then specify the other properties such as style, etc.
Text(
'hello, ninjas!', //text to be written
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
letterSpacing: 2.0,
color: Colors.grey[600],
fontFamily: 'IndieFlower',
),
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.

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.