In this post, we will know about the RichText widget in flutter. We will know what RichText is and how you can use RichText in your flutter project. Let’s begin.

What is RichText in flutter?

RichText is a widget in flutter that is used to display text that uses multiple different styles.

Let me ask you a question. How would you display text like this in flutter (See the image below)?

You would say Text widget. Definitely, you are right. But, What about displaying text like this(See the image below).

Notice “tutorials” and “web and mobile” in the image above. How would you display this type of text? The text in the above image is using different styles. The answer is the RichText widget. We can display text like this using the RichText widget.

Now that you understand what RichText is in flutter, let’s now see how to use the RichText widget by looking at a code example.

	import 'package:flutter/material.dart';
	void main()
	{
	runApp(MyApp());
	}
	class MyApp extends StatelessWidget
	{
	@override
	Widget build(BuildContext context)
	{
	return MaterialApp(
	home: MyHomePage()
	);
	}
	}
	class MyHomePage extends StatelessWidget
	{
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('RichText Example'),
	backgroundColor: Colors.purple,
	),
	body: Padding(
	padding: EdgeInsets.all(10.0),
	child: Center(
	child: RichText(
	text: TextSpan(
	text: 'DeveloperXon provides you ',
	style: TextStyle(color: Colors.black, fontSize: 20),
	children: const <TextSpan>[
	TextSpan(text: 'tutorials ', style: TextStyle(fontWeight: FontWeight.bold)),
	TextSpan(text: 'on '),
	TextSpan(text: 'web and mobile ', style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blue)),
	TextSpan(text: 'development.'),
	],
	),
	)
	),
	)
	);
	}
	}

view raw RichText_example.dart hosted with ❤ by GitHub

You can see in the above code that I have used RichText to apply multiple styles to the text.

Now the post ends here.

Goodbye.