Flutter RichText Widget

The RichText widget is a powerful widget in Flutter that allows us to display text with multiple styles, such as different colors, fonts, and font sizes. In this blog post, we will explore the RichText widget and how to use it in our Flutter applications.

Creating a RichText

To create a RichText widget, we need to define a list of TextSpan objects that represent the different parts of the text we want to display with different styles. 

Here's an example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        body: Center(
          child: RichText(
            text: TextSpan(
              text: 'Hello ',
              style: TextStyle(
                color: Colors.black,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: 'world!',
                  style: TextStyle(
                    color: Colors.blue,
                    decoration: TextDecoration.underline,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we create a RichText widget that displays the text "Hello world!" with different styles. We define a TextSpan object for the first part of the text, which is "Hello", and we set its style property to specify the font size, color, and weight. We also define another TextSpan object for the second part of the text, which is "world!", and we set its style property to specify a different color and an underline decoration.

Customizing the TextStyles

We can customize the TextStyle objects used in the TextSpan objects to achieve different styles for different parts of the text. Here are some of the properties we can use to customize the TextStyle:

  • color: The color of the text.
  • fontSize: The font size of the text.
  • fontWeight: The weight of the font, such as bold or normal.
  • fontStyle: The style of the font, such as italic or normal.
  • decoration: The decoration applied to the text, such as underline or strikethrough.

We can also combine multiple properties to achieve more complex styles.

Here's an example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        body: Center(
          child: RichText(
            text: TextSpan(
              text: 'Hello ',
              style: TextStyle(
                color: Colors.black,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: 'world!',
                  style: TextStyle(
                    color: Colors.blue,
                    decoration: TextDecoration.combine([
                      TextDecoration.underline,
                      TextDecoration.overline,
                    ]),
                    decorationThickness: 2,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}ā€‹

In this example, we add an overline decoration to the second part of the text by combining the underline and overline decorations using the TextDecoration.combine() method. We also set the decorationThickness property to 2 to increase the thickness of the decorations. Finally, we set the fontStyle property to FontStyle.italic to make the second part