{"id":2091,"date":"2022-04-07T19:02:34","date_gmt":"2022-04-07T19:02:34","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2091"},"modified":"2022-04-07T19:02:34","modified_gmt":"2022-04-07T19:02:34","slug":"flutter-rich-text-widget","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/flutter-rich-text-widget\/","title":{"rendered":"Flutter Rich Text Widget"},"content":{"rendered":"\n

Sometimes we want to show a line or a paragraph with multiple styles<\/strong> such as bold, italicized, underlined, different color, different font or everything at once. In that case, we should have to use the RichText widget that allows us to perform multiple test styles without switching many widgets.<\/p>\n\n\n\n

RichText is a very useful widget in Flutter, which is used for displaying a paragraph of text on the UI with multiple styles. Inside the widget, we can have different styles by giving it a tree of TextSpan<\/strong> widgets. Each TextSpan can set its own style for overriding the default style.<\/p>\n\n\n\n

RichText Structure<\/h3>\n\n\n\n

The below image explains the structure of the RichText widget. In this image, the parent TextSpan has its own style property and a text parameter, and then it can contain several children TextSpan who have their own style property.<\/p>\n\n\n\n

\"Flutter<\/figure>\n\n\n\n

From the above overview, now we will see how to use this widget in our application.<\/p>\n\n\n\n

Example<\/strong><\/p>\n\n\n\n

Suppose our app has a login screen<\/strong> and an option to create a new user account<\/strong>. The creation of new user account section has a combination of regular text and colored text, as shown in the below screen:<\/p>\n\n\n\n

\"Flutter<\/figure>\n\n\n\n

In the above image, we can see the text\u00a0“Don’t have an account? Sign up”<\/strong>\u00a0is a single line text, where the last part is a clickable word that navigates the user on the sign-up page. To make this type of text, we will\u00a0divide<\/strong>\u00a0it into two parts. The first part uses the\u00a0parent<\/strong>\u00a0TextSpan and input the text\u00a0“Don’t have an account?”<\/strong>\u00a0with the\u00a0black<\/strong>\u00a0color. The second part uses the\u00a0children<\/strong>\u00a0TextSpan and input the text\u00a0“Sign up”<\/strong>\u00a0with a\u00a0blue<\/strong>\u00a0color. See the below code:<\/a><\/a><\/a><\/p>\n\n\n\n

RichText(  \n    text: TextSpan(  \n        text: 'Don\\'t have an account?',  \n        style: TextStyle(color: Colors.black, fontSize: 20),  \n        children: <TextSpan>[  \n            TextSpan(text: ' Sign up',  \n                style: TextStyle(color: Colors.blueAccent, fontSize: 20)  \n            )  \n        ]  \n    ),  \n),  <\/code><\/pre>\n\n\n\n
Since the “Sign up” is a clickable text, so we need to implement onTap()<\/strong> action on this part. The TextSpan contains TapGestureRecognizer()<\/strong> that implement onTap() action. In our example, we will use the recognizer property to make the text tappable. Let us show the entire code snippet to understand it more clearly.<\/p>\n\n\n\n
Create a new project in the IDE you are using. Open the project, navigate to the lib folder, and replace the below code with the\u00a0main.dart<\/strong>\u00a0file.<\/p>\n\n\n\n
<\/a><\/a><\/a><\/p>\n\n\n\n
import 'package:flutter\/material.dart';  \nimport 'package:flutter\/gestures.dart';  \n  \nvoid main() { runApp(MyApp()); }  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n        theme: ThemeData(  \n          primarySwatch: Colors.green,  \n        ),  \n        home: MyTextPage()  \n    );  \n  }  \n}  \nclass MyTextPage extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n          title:Text(\"Rich Text Widget Example\")  \n      ),  \n      body: Container(  \n          child: Center(  \n            child: RichText(  \n              text: TextSpan(  \n                  text: 'Don\\'t have an account?',  \n                  style: TextStyle(color: Colors.black, fontSize: 20),  \n                  children: <TextSpan>[  \n                    TextSpan(text: ' Sign up',  \n                        style: TextStyle(color: Colors.blueAccent, fontSize: 20),  \n                        recognizer: TapGestureRecognizer()  \n                          ..onTap = () {}  \n                    )  \n                  ]  \n              ),  \n            ),  \n          )  \n      )  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
When we run this application in the emulator or device, we should get the UI similar to the below screenshot:<\/p>\n\n\n\n
\"Flutter<\/figure>\n\n\n\n
How to show an icon in a text widget in Flutter?<\/h3>\n\n\n\n
Sometimes the developers need to show an\u00a0icon<\/strong>\u00a0with the text widget. To do this, Flutter provides a\u00a0WidgetSpan()<\/strong>\u00a0inside the RichText() widget to add an icon with the text widget. The below example explains it in a simple way:<\/a><\/a><\/a><\/p>\n\n\n\n
import 'package:flutter\/material.dart';  \n  \nvoid main() { runApp(MyApp()); }  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n        home: MyTextPage()  \n    );  \n  }  \n}  \nclass MyTextPage extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n          title:Text(\"Rich Text Widget Example\")  \n      ),  \n      body: Container(  \n          child: Center(  \n            child:RichText(  \n              text: TextSpan(  \n                style: Theme.of(context).textTheme.body1,  \n                children: [  \n                  TextSpan(text: 'Click ', style: TextStyle(fontSize: 25)),  \n                  WidgetSpan(  \n                    child: Padding(  \n                      padding: const EdgeInsets.symmetric(horizontal: 2.0),  \n                      child: Icon(Icons.add, color: Colors.red),  \n                    ),  \n                  ),  \n                  TextSpan(text: ' to add', style: TextStyle(fontSize: 25)),  \n                ],  \n              ),  \n            )  \n          )  \n      )  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
When we run this application in the emulator or device, we should get the UI similar to the below screenshot:<\/p>\n\n\n\n
\"Flutter<\/figure>\n","protected":false},"excerpt":{"rendered":"
Sometimes we want to show a line or a paragraph with multiple styles such as bold, italicized, underlined, different color, different font or everything at once. In that case, we should have to use the RichText widget that allows us to perform multiple test styles without switching many widgets. RichText is a very useful widget in Flutter, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[503],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2091"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2091"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2091\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}