How to Style Only a Part of Text in Flutter?

To style only a part of text in Flutter, you can use the RichText widget. The RichText widget allows you to specify different styles for different parts of text within the same widget.

The RichText widget takes a text property of type TextSpan where you can put your text and style it differently. If you have even more text, you can put it inside the children array of TextSpan and specify different styles for each part of the text.

The following example shows how you can specify different styles for different parts of the text using RichText & TextSpan widgets:

RichText(
  text: const TextSpan(
    text: 'This is ',
    style: TextStyle(fontSize: 25, color: Colors.deepPurple), // Common styles
    children: [
      TextSpan(text: 'Red ', style: TextStyle(color: Colors.red)),
      TextSpan( text: 'Bold ', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan( text: 'and italic text', style: TextStyle(fontStyle: FontStyle.italic))
    ],
  ),
),

Below is a full Dart/Flutter example that gives different styles to different parts of text.

Please note that the styles specified on the global level of the TextSpan apply to all of its children. In our example, we have specified a font size of 25 pixels and a font color of deepPurple for all children(TextSpan) widgets:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // App and app bar title
  static const String _title = 'RichText Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Container(
          padding: const EdgeInsets.all(10),
          child: RichText(
            text: const TextSpan(
              text: 'This is ',
              style: TextStyle(
                fontSize: 25,
                color: Colors.deepPurple,
              ), // Common styles
              children: [
                TextSpan(
                  text: 'Red ',
                  style: TextStyle(color: Colors.red),
                ),
                TextSpan(
                  text: 'Bold ',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                TextSpan(
                  text: 'and italic text',
                  style: TextStyle(fontStyle: FontStyle.italic),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

As you can see from the above output, different parts of the text are styled differently, some part is bolded, some part is italicized, some is in red color, etc.

Using the Text.rich() Constructor to Style a Part of the Text

You can also use the Text.rich constructor of the Text class to give different styles to different parts of the text.

The Text.rich() constructor also takes the help of the TextSpan widgets to give separate styles to different text.

The following example shows how you can use the Text.rich() constructor to style different parts of the text:

Text.rich(
  TextSpan(
    text: 'This is ',
    style: TextStyle( fontSize: 25, color: Colors.deepPurple), // Common styles
    children: [
      TextSpan( text: 'Red ', style: TextStyle(color: Colors.red)),
      TextSpan( text: 'Bold ', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan( text: 'and italic text', style: TextStyle(fontStyle: FontStyle.italic))
    ],
  ),
),

Below is a full Flutter example which gives different styles to different text blocks with the help of the Text.rich() constructor of the Text widget:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

  // App and app bar title
  static const String _title = 'Text.rich() Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Container(
          padding: const EdgeInsets.all(10),
          child: const Text.rich(
            TextSpan(
              text: 'This is ',
              style: TextStyle(
                  fontSize: 25, color: Colors.deepPurple), // Common styles
              children: [
                TextSpan(
                  text: 'Red ',
                  style: TextStyle(color: Colors.red),
                ),
                TextSpan(
                  text: 'Bold ',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                TextSpan(
                  text: 'and italic text',
                  style: TextStyle(fontStyle: FontStyle.italic),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Conclusion

In this article, we learned how we can style only a part of the text using Flutter.

In summary, there are two ways to style only a part of the text in Flutter. First, using the RichText widget and second using the Text.rich constructor of the Text class.

In both methods, you can specify the text you want to style differently as a TextSpan and give it any specific styles you want.

Thanks for reading.