What is RichText in flutter?

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.'),
],
),
)
),
)
);
}
}

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: