FlutterDocs
Home › Guides › How to change Font Style of Text Widget in Flutter

How to change Font Style of Text Widget in Flutter

Restored from an archived snapshot captured 2021-06-22. Examples may refer to earlier Flutter versions.

In this example, we are going to show the way to change style of font inside text widget such as font-weight, font size, color, bold, italic, underline properties of font inside Text Widget in Flutter. See the example below for more details:

Set Font Weight, Decoration, Font Size on Text Widget:

Text( 
  "Lorem Ipsum is simply dummy text.",
  style: TextStyle( 
      fontSize: 18,
      height: 2, //line height 200%, 1= 100%, were 0.9 = 90% of actual line height
      color: Colors.redAccent, //font color
      backgroundColor: Colors.black12, //background color
      letterSpacing: 5, //letter spacing
      decoration: TextDecoration.underline, //make underline
      decorationStyle: TextDecorationStyle.double, //double underline
      decorationColor: Colors.brown, //text decoration 'underline' color
      decorationThickness: 1.5, //decoration 'underline' thickness
      fontStyle: FontStyle.italic
  ),
)

Set H1, H2, H3, H4, H5, H6 heading style on Text Widget:

Text( 
  "hello world",
  style: Theme.of(context).textTheme.headline1, // like <h1> in HTML
)

Full Code Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Text Style"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column( 
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                
                Text( 
                  "Lorem Ipsum is simply dummy text.",
                  style: TextStyle( 
                     fontSize: 18,
                     height: 2, //line height 200%, 1= 100%, were 0.9 = 90% of actual line height
                     color: Colors.redAccent, //font color
                     backgroundColor: Colors.black12, //background color
                     letterSpacing: 5, //letter spacing
                     decoration: TextDecoration.underline, //make underline
                     decorationStyle: TextDecorationStyle.double, //double underline
                     decorationColor: Colors.brown, //text decoration 'underline' color
                     decorationThickness: 1.5, //decoration 'underline' thickness
                     fontStyle: FontStyle.italic
                  ),
                ),

                 Text( 
                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
                  style: TextStyle( 
                     fontSize: 38,
                     height: 0.9, //line height 90% of actual height
                     color: Colors.orangeAccent,
                     decoration: TextDecoration.lineThrough,
                  ),
                ),

                Text( 
                   "hello world",
                    style: Theme.of(context).textTheme.headline1, // like <h1> in HTML
                )
              ],
            ),
          )
       );
  }
}

Output Screenshot:

[Screenshot/image absent from the archive]

In this way, you can make the font big, small, bold, italic, underline, double underline using TextStyle() on Text() widget in Flutter.