Flutter Highlight Part of Text using backgroundColor

In flutter Text widget supports background color. In our daily live many times we usages text highlighter comes in Yellow color. Basically to highlight the text. In flutter we can do the same by applying backgroundColor property on Text. But there is a catch, To highlight a part of text we have to use Text.rich() widget which supports multiple text child.

Flutter Highlight Part of Text using backgroundColor:

1. Defining Text Rich widget and multiple sub Text child inside it. We are applying background color on Highlight text.

Text.rich(
        TextSpan(
          text: 'Part Of Text ',
          style: TextStyle(fontSize: 32),
          children: [
            TextSpan(
                text: 'Highlight',
                style: TextStyle(
                  backgroundColor: Colors.yellow,
                )),
            TextSpan(
              text: ' Using Background Color.',
            ),
          ],
        ),
      )

2. Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text.rich(
        TextSpan(
          text: 'Part Of Text ',
          style: TextStyle(fontSize: 32),
          children: [
            TextSpan(
                text: 'Highlight',
                style: TextStyle(
                  backgroundColor: Colors.yellow,
                )),
            TextSpan(
              text: ' Using Background Color.',
            ),
          ],
        ),
      ))),
    );
  }
}

Screenshot: