What is the Flutter bold font?
In Flutter, the fontWeight property of the TextStyle class determines the boldness of the font. The fontWeight property takes a value from the FontWeight enum, which has a range of values from 100 to 900. The higher the value, the more bold the font will be.
For example, you can set the fontWeight property to FontWeight.bold to use a bold version of the default font, or you can use a specific weight such as FontWeight.w700 to use a bold version of a custom font.
The Bold font creates the text darker, and thicker than the surrounding text. Usually, we consider bold text with a font weight of 700 and above. But if my normal text has a weight of 200 then I will consider font weight 400 as bold. But It is my own perception.
The maximum font-weight is 900 and is called Black. Font-weight 800 is called Heavy. For me, these are all Bold. You can find the list of font weights in another section below.
Why use Flutter bold text
Bold text is often used to highlight important words or phrases, or to make text stand out on the screen. It can be used to grab the attention of the reader and make the text more visually appealing. Bold text can also be used to highlight key points or calls to action in an app.
For example, you might use bold text for headings or subheadings to help the reader navigate the content, or you might use bold text for buttons to make them more prominent and easier to click.
Bold text can also be used to add emphasis or to make certain words or phrases stand out in a sentence. This can be particularly useful when you want to convey a strong message or emotion, or when you want to draw attention to a specific piece of information.
Overall, using bold text can be an effective way to add emphasis and make your text more impactful and easier to read.
How to make bold text in Flutter
To make text bold in Flutter, you can use the fontWeight property of the TextStyle class. The fontWeight property takes a value from the FontWeight enum, which has a range of values from 100 to 900. The higher the value, the more bold the font will be.
Here’s an example of how you can use the fontWeight property to display bold text in Flutter:
Text(
'Hello World',
style: TextStyle(fontWeight: FontWeight.bold),
),This will display the text “Hello World” in bold using the default font.
You can also use a specific weight such as FontWeight.w700 to use a bold version of a custom font.
Text(
'Hello World',
style: TextStyle(fontWeight: FontWeight.w700),
),This will display the text “Hello World” in bold using a custom font.
Some fonts do not support all the font weights so before using any of the custom fonts make sure it does support your desired font-weight.
Text(
'flutterassets.com',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900
),
),What is the Default Flutter Text Weight
The default fontWeight for the Text widget in Flutter is FontWeight.w400, which is the normal weight of the default font. This means that the text will be rendered in a normal (not bold) version of the default font.
The fontWeight property of the TextStyle class determines the boldness of the font. The FontWeight enum, which is used to specify the fontWeight property, has a range of values from 100 to 900. The value FontWeight.w400 corresponds to the normal weight of the default font.
You can use the fontWeight property to specify the weight of the font for a Text widget. For example:
Text(
'Hello World',
style: TextStyle(fontWeight: FontWeight.w400),
),This will display the text “Hello World” in the normal weight of the default font.
You can also use other values from the FontWeight enum to specify a different weight for the font. For example:
Text(
'Hello World',
style: TextStyle(fontWeight: FontWeight.w300),
),This will display the text “Hello World” in a lighter weight than the default font.
You can also omit the fontWeight property altogether, as it is optional and the default value is FontWeight.w400.
Text(
'Hello World',
),Text(
'Hello World',
style: TextStyle(),
),This will also display the text “Hello World” in the normal weight of the default font.
List of Flutter font weights
In Flutter, the FontWeight enum defines a range of values that determine the boldness of a font. The FontWeight enum has the following values:
- FontWeight.w100 is Ultra Light
- FontWeight.w200 is Thin
- FontWeight.w300 is Light
- FontWeight.w400 is Regular
- FontWeight.w500 is Medium
- FontWeight.w600 is Semi Bold
- FontWeight.w700 is Bold
- FontWeight.w800 is Heavy
- FontWeight.w900 is Black
You can use these values with the fontWeight property of the TextStyle class to specify the boldness of the font for a Text widget. For example:
Text(
'Hello World',
style: TextStyle(fontWeight: FontWeight.w700),
),This will display the text “Hello World” in bold using the default font.
You can also use the convenience value FontWeight.bold to use a bold version of the default font.
Text(
'Hello World',
style: TextStyle(fontWeight: FontWeight.bold),
),This will also display the text “Hello World” in bold using the default font.
How to use Flutter fontWeight
In Flutter, you can use font weights from 100 to 900. Above you can find a list of font weights with their names. As I mentioned before if you use a custom font make sure it supports your desired font weight. For example, some fonts may support fonts from 300 to 700 or support only a regular or medium font weight.
Center(
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'flutterassets.com',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900
),
),
Text(
'flutterassets.com',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400
),
),
Text(
'flutterassets.com',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w100
),
),
],
),
),
Make part of the Text Bold in Flutter
Use RichText in Flutter
To make only one word in a piece of text bold in Flutter, you can use the RichText widget and wrap the word in a TextSpan with the desired fontWeight.
Here’s an example of how you can use the RichText widget to make only one word bold in Flutter:
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(text: 'World', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),
This will display the text “Hello World” with the word “World” displayed in bold.
You can also use the RichText widget to apply different styles to different parts of the text, such as different colors or font sizes.
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(text: 'W', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32)),
TextSpan(text: 'orld', style: TextStyle(fontSize: 24)),
],
),
),
This will display the text “Hello World” with the letter “W” displayed in bold and a larger font size, and the rest of the word “orld” displayed in a smaller font size.
Use Text.rich in Flutter
To make only one word in a piece of text bold in Flutter, you can also use the Text.rich widget and wrap the word in a TextSpan with the desired fontWeight.
Here’s an example of how you can use the Text.rich widget to make only one word bold in Flutter:
Text.rich(
TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(text: 'World', style: TextStyle(fontWeight: FontWeight.bold)),
],
),
),This will display the text “Hello World” with the word “World” displayed in bold.
You can also use the Text.rich widget to apply different styles to different parts of the text, such as different colors or font sizes.
Text.rich(
TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(text: 'W', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32)),
TextSpan(text: 'orld', style: TextStyle(fontSize: 24)),
],
),
),This will display the text “Hello World” with the letter “W” displayed in bold and a larger font size, and the rest of the word “orld” displayed in a smaller font size.
You can find more Text widget examples in this post: Flutter Basics – What is and how to use Text widget in Flutter
