In this Flutter tutorial, we’ll learn about the role of Flutter rich text widget in Flutter apps and how to easily use it. We’ll understand it using practical Flutter code examples.
Introduction: Flutter Rich Text Widget
It’s used to give different styles to a text in Flutter. For instance, we’ve a text ‘This is Flutter’. Now by using Flutter rich text, we can give different styles to each letter/word of this text.
Let’s now understand it using practical examples.
Implementing Flutter Rich Text Widget (Easy Examples)
For that, we’ve to use rich text widget with its required text constructor. We’ve also used its text align constructor and set it to center. Its useful when the text comes in multiple lines but we want it to be aligned center. We can also set it to left, right, justify etc. See below code:
RichText(
textAlign:TextAlign.center,
text: TextSpan(
text: 'This is rich text',
style: TextStyle(color: Colors.blue)),
)
We’ve passed text span widget to the text constructor of rich text widget. Now by using the constructors of text span, we’ll decorate our text. We’ve already used its text and style constructor. Click here if you want to learn about the customizing of text style in detail. Let’s now explore its children constructor.
Children Constructor
RichText(
text: TextSpan(
text: 'This ',
style: TextStyle(color: Colors.blue, fontSize: 18),
children: [
TextSpan(text: 'is')
]),
)
Let’s now give it multiple children and specify different styles to them. See below code:
RichText( text: TextSpan( text: 'This ', style: TextStyle(color: Colors.blue, fontSize: 18), children: [ TextSpan( text: 'is ', style: TextStyle(color: Colors.green, fontSize: 24)), TextSpan( text: ' a', style: TextStyle(color: Colors.black, fontSize: 28)), TextSpan( text: ' rich', style: TextStyle( color: Colors.purple, fontSize: 15, fontWeight: FontWeight.bold)), TextSpan( text: ' text', style: TextStyle(color: Colors.brown, fontSize: 32)) ]), )
So this is how we can easily use Flutter rich text widget. Hope you like this article. Do feel free to share it with your squad of Flutter programmers.
Also, don’t hesitate to ask if you still have any queries regarding the customization of Flutter rich text widget. We’ll be super glad to solve all your queries.
The complete source code of customized rich text widget is given in the below section.
Custom Flutter Rich Text Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, home: RichTextScreen());
}
}
class RichTextScreen extends StatelessWidget {
const RichTextScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 18),
children: [
TextSpan(
text: 'is ',
style: TextStyle(color: Colors.green, fontSize: 24)),
TextSpan(
text: ' a',
style: TextStyle(color: Colors.black, fontSize: 28)),
TextSpan(
text: ' very',
style: TextStyle(
color: Colors.purple,
fontSize: 15,
fontWeight: FontWeight.bold)),
TextSpan(
text: ' good',
style: TextStyle(color: Colors.black, fontSize: 10)),
TextSpan(
text: ' programming',
style: TextStyle(color: Colors.blue, fontSize: 15)),
TextSpan(
text: ' language.',
style: TextStyle(color: Colors.green, fontSize: 20)),
TextSpan(
text: ' Do',
style: TextStyle(color: Colors.red, fontSize: 13)),
TextSpan(
text: ' give it',
style: TextStyle(color: Colors.grey, fontSize: 28)),
TextSpan(
text: ' a try.',
style: TextStyle(color: Colors.redAccent, fontSize: 40)),
]),
),
),
);
}
}Conclusion
As a conclusion of this tutorial, hope you now have a detailed understanding of how to properly use Flutter rich text widget. We’ll be looking forward to receive your valuable feedback on this article.
We’d be very glad to see you visit our other tutorials on Flutter app development. Thank you for reading this article.