In Flutter, RichText is a widget that helps us to add more styling to a paragraph of text. Otherwise we cannot do that.
However, with Text widget we cannot achieve the same effect.
In RichText widget, we can return several TextSpan widgets and, moreover, in each TextSpan we can add different type of styling.
Not only that, the TextSpan is a subclass of InLineSpan class that is actually an immutable span of inline content, or text that forms a part of a paragraph.
In addition, the TextSpan widget has a Gesture Detector property called recognizer. Using recognizer we can easily build a navigation link in that particular part of paragraph.
In short, RichText widget gives us multiple advantages to style a paragraph of Text.
How we can do that?
We’ll see in a minute.
How do you add RichText on flutter?
Before we add RichText on Flutter, let’s revisit our News App, where we last decorated our categories screen.
However, the Favorites page remained the same. We didn’t change the styling after that.
Now, we can change this Favorites screen completely by adding the RichText widget and several TextSpan widgets.
Not only that, we’ll also display navigation link inside the paragraph, so that users can click or tap on the link and go to another page.
The code snippet of this page now looks like the following. We’ve already learned that a RichText widget can return a children of TextSpan widgets.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:news_app_extended/views/local_news.dart';
class FavoritesScreen extends StatelessWidget {
const FavoritesScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return _richTextController(context);
}
}
Widget _richTextController(BuildContext context) => Container(
color: Colors.black12,
padding: const EdgeInsets.all(10),
child: Center(
child: RichText(
text: TextSpan(
text: 'This News App is inspired by the principle of free'
' Journalism. You can select ',
style: const TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text: 'Local',
style: const TextStyle(
color: Colors.deepOrange,
fontSize: 20,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.of(context).pushNamed(LocalNews.routeName);
},
),
const TextSpan(
text: ' to ',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: 'Global,',
style: const TextStyle(
color: Colors.deepOrange,
fontSize: 20,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
recognizer: TapGestureRecognizer()
..onTap = () {
//
},
),
const TextSpan(
text: ' news, and not only that, you can take part as a'
' Citizen Journalist to publish your story.',
style: TextStyle(
color: Colors.green,
fontSize: 20,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
);
// Although we have the full code snippet of Favorites screen, but to understand the architecture of News App, please visit the respective GitHub repositoryIf we don’t get a glimpse of this page, we cannot understand how RichText widget helps us to add styling to a whole paragraph of text.
How do you span text in flutter?
We not only span the text of the screen but with the help of TextSpan widget, we’ve added several functionality.
In addition, we’ve changed the background color, a part of the paragraph is in black and the other is in green.
We’ve also changed the navigation color, adding an underline.
TextSpan(
text: 'Local',
style: const TextStyle(
color: Colors.deepOrange,
fontSize: 20,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.of(context).pushNamed(LocalNews.routeName);
},
),The above code snippet allows us to add the navigation link to another page, or screen.
As an example, we’ve only created a Local News Page, where we can navigate from this page.
To do that, we have added a route name in Material Design page first.
routes: {
'/': (ctx) => const TabsScreen(),
CategoryNewsScreen.routeName: (ctx) => const CategoryNewsScreen(),
NewsDetailScreen.routeName: (ctx) => const NewsDetailScreen(),
LocalNews.routeName: (ctx) => const LocalNews(),
},After that, we’ve added a static route name property in the Local News screen widget.
How do you use TapGestureRecognizer flutter?
In fact, without the TapGestureRecognizer class we cannot navigate to the Local News page.
Isn’t it?
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.of(context).pushNamed(LocalNews.routeName);
},Now we can tap the link and the TapGestureRecognizer handles the event.
And, finally we reach to a new screen.
To sum up, with the help of RichText widget and by returning several TextSpan widgets we’ve added more styling to our News App.
Leave a Reply