How to set Font Size, Weight, Color, Decoration of Text in Flutter

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:

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

No any Comments on this Article


Please Wait...