How to make text bold in Flutter

Key takeaways:

  • The fontWeight property in TextStyle provides granular control over text weight, with options ranging from FontWeight.w100 (Ultra Light) to FontWeight.w900 (Black). The default is FontWeight.w400 (Regular).

  • The RichText widget combines with TextSpan to apply bold styling to specific parts of a text string, enabling dynamic and flexible text formatting.

  • Flutter supports custom fonts through the fontFamily property, offering developers the ability to load and style text with personalized fonts while maintaining compatibility with fontWeight.

  • We can combine different font weights (w100, w500, w700, etc.) within the same UI to create visually distinct and appealing typography, suited for headers, labels, or content emphasis.

In Flutter, text styling is crucial to creating visually appealing user interfaces. Making text bold is a common requirement when emphasizing certain parts of our app’s content. Fortunately, Flutter provides a straightforward and flexible way to achieve this. This Answer will explore different methods of bold text in Flutter and provide code examples for each approach.

Method 1: Using Flutter font weights

To make text bold in Flutter, we can use the fontWeight property of the TextStyle class. The fontWeight property takes a value from the FontWeight enum, which ranges from 100 to 900. The higher the value, the bolder the font will appear.

Here is a list of the available font weights and their corresponding descriptions:

  • FontWeight.w100: Ultra Light

  • FontWeight.w200: Thin

  • FontWeight.w300: Light

  • FontWeight.w400: Regular

  • FontWeight.w500: Medium

  • FontWeight.w600: Semi-Bold

  • FontWeight.w700: Bold

  • FontWeight.w800: Heavy

  • FontWeight.w900: Black

Default Flutter text weights

If we omit the fontWeight property, the default value (FontWeight.w400) will be used, and the text will be displayed in the normal weight of the default font as shown below:

Text with default bold property
Text with default bold property

How to use Flutter fontWeight

The simplest method to make text bold in Flutter is by using the Text widget. The Text widget allows us to define the text’s style using the style property. To make the text bold, set the fontWeight property of the TextStyle to FontWeight.bold.

Text(
  'Educative Answers',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 18,
  ),
),

After running the above code, we will be able to see the following output:

Text with FontWeight.w700 property
Text with FontWeight.w700 property

When FontWeight.bold is used, it also bolds the text and uses the default value of FontWeight.w700.

Method 2: Bolding part of a text using RichText with TextSpan

Sometimes, we may want to make only a portion of the text bold while keeping the rest normal. To achieve this, we can use the RichText widget with the TextSpan as shown in the code below: 

RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: DefaultTextStyle.of(context).style.copyWith(fontSize: 24),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: '!',
      ),
    ],
  ),
),

After running the above code, we'll be able to see the following output:

Text with with some part of it with FontWeight.w700 property
Text with with some part of it with FontWeight.w700 property

Code example

We'll use different font weights in the code below to style text. 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bold Text Example'),
          ),
          body: Center(
          child:
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Educative Answers: 900 Weight',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.w900
                ),
              ),
              Text(
                'Educative Answers: 500 Weight',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.w500
                ),
              ),
              Text(
                'Educative Answers: 100 Weight',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.w100
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Implementation of different fonts

Explanation

  1. Lines 20–26: We display the first Text widget with the text 'Educative Answers: 900 Weight'. It has a font size of 22 and a font-weight of FontWeight.w900, which makes the text appear bold and heavy.

  2. Lines 27–33: We display the second Text widget with the text 'Educative Answers: 500 Weight'. It also has a font size of 22, but this time, the font weight is set to the FontWeight.w500, resulting in a regular weight font.

  3. Lines 34–40: We display the third Text widget with the text 'Educative Answers: 100 Weight'. It shares the same font size of 22 but uses the FontWeight.w100, representing an ultralight font.

After running the above code, we will be able to see the following output:

Text with different bold properties
Text with different bold properties

Method 3: Using custom fonts and bold styling in Flutter

In addition to using Flutter’s built-in font weights, developers can also utilize custom fonts to achieve unique, bold effects. Custom fonts can be loaded into the app and styled using the same fontWeight property. This allows for more design flexibility and customization, giving apps a distinctive look.

To use a custom font in Flutter:

  1. Download the desired font and add it to the app’s assets folder.

  2. Define the font in the pubspec.yaml file.

  3. Use the fontFamily property along with fontWeight in the TextStyle to style the text with the custom font.

Example

Text(
  'Custom Bold Font Example',
  style: TextStyle(
    fontFamily: 'CustomFont',  // Define custom font
    fontWeight: FontWeight.bold,
    fontSize: 24,
  ),
),

This allows for more personalized font experiences in the app and works well with Flutter’s fontWeight system.

Conclusion

Flutter provides a variety of font weights from the FontWeight enum, ranging from ultralight to bold and even heavier weights. Using the fontWeight property of the TextStyle class, we can easily make text bold in Flutter. The Text widget is a simple method to achieve overall bold text, while the RichText widget allows for selective styling of specific text parts. With this knowledge, developers can effectively style text elements in their Flutter applications, ensuring visually appealing and emphasized content for their users.

Further learning

  • Explore various state management techniques, such as Provider, Riverpod, and Bloc, to efficiently manage and update the app’s state.

  • Learn how to create smooth, engaging animations and transitions to enhance the user experience in your Flutter apps.

  • Understand how to connect Flutter apps to backend services like Firebase or REST APIs for real-time data and authentication.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How do I bold a string in Dart?

To bold a string in Dart, particularly when using Flutter, you apply text styling through the Text widget and the TextStyle class. You can set the font weight to bold using the fontWeight property. While Dart itself doesn’t provide a way to bold text (since it’s primarily a backend language), you can achieve this in Flutter by adjusting the text style properties when rendering text in the user interface.

How can I make my text messages bold?

To make text messages bold in a Flutter application, you can apply text styling using the Text widget and customize its appearance through the TextStyle class. By setting the font weight to bold, the text within the widget will be displayed as bold in the user interface. This approach works for highlighting important parts of text or creating emphasis in your app’s design.

How do I bold the text in a string?

In Dart, you cannot directly make a string bold because a string is purely textual data without formatting. However, if you’re working within a framework like Flutter, you can display the string as bold by using the Text widget and applying a TextStyle with the font weight set to bold. Formatting a string as bold is typically a function of how the string is displayed, not how it is stored or represented in code. For bold text in an interface, the styling happens during the rendering process using UI elements.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved