RichText

The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree. The text might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

Text displayed in a RichText widget must be explicitly styled. When picking which style to use, consider using DefaultTextStyle.of the current BuildContext to provide defaults. For more details on how to style text in a RichText widget, see the documentation for TextStyle.

Consider using the Text widget to integrate with the DefaultTextStyle automatically. When all the text uses the same style, the default constructor is less verbose. The Text.rich constructor allows you to style multiple spans with the default text style while still allowing specified styles per span.

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

Hyperlink using Gesture Recognizer

You can attach the gesture recognizers to TextSpans making it possible to have a tappable link. You need to add this to your package‚Äôs pubspec.yaml file for launching URL.

import 'package:flutter/gestures.dart';
 
import 'package:url_launcher/url_launcher.dart';
 
 
RichText(
 text: TextSpan(
   children: &lt;TextSpan>[
     TextSpan(
         text: ' This ',
         recognizer: new TapGestureRecognizer()..onTap = () {
          launch('https://www.google.com');
         },
         style: defaultStyle.copyWith(decoration: TextDecoration.underline,color: Colors.blue)),
     TextSpan(
         text: "hyper link embedded text.", style: defaultStyle)
   ],
 ),
),

Add Border to Text

RichText(
              text: TextSpan(
                children: &lt;TextSpan>[
                  TextSpan(
                      text: 'Border to text',
                      style: defaultStyle.copyWith(
                          background: new Paint()
                            ..color = Colors.red
                            ..style = PaintingStyle.stroke)),
                ],
              ),
            ),

5 Replies to “RichText”

  1. That is very attention-grabbing, You’re an excessively professional blogger.

    I have joined your feed and sit up for searching for more of your great post.
    Additionally, I have shared your web site in my social networks

Leave a Reply

Your email address will not be published.