Mobile applications centered around the text. So Text in apps is important for many cases. The Text widget gives you all need. You can show text at a different size, different fonts styles, and so on.

What if you want to show a line or a paragraph that could have multiple styles. Something is bold for emphasis or italicized or underlined or different color or a different font or everything at once.

You should use Rich Text you have to give it a tree of TextSpan and you can define a separate style for each node. 

    TextStyle defaultStyle = TextStyle(fontSize: 24, color: Colors.black);


RichText(
              text: TextSpan(
                style: defaultStyle,
                text: " The RichText widget allows you to . ",
                children: <TextSpan>[
                  TextSpan(text: 'style  ',style: TextStyle(fontWeight: FontWeight.w700)),
                  TextSpan(text: 'your text',style: TextStyle(color: Colors.redAccent,fontSize: 38))
                ],
              ),
            )
Flutter Rich Text Example

The default text style for the top TextSpan and we’re overriding it with something more slashing one of the child TextSpan.Flutter will layout your text as you expect to keep the baselines aligned. 

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: <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)
   ],
 ),
),
Open URL in Flutter

To Underline the text use decoration: TextDecoration.underline to TextStyle of a TextSpan.

Add Border to Text

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

We add Paint as a background argument on TextStyle that creates a background for the text. This result is a hoop of the given size being painted. The line drawn on the edge will be the width given by the Paint.strokeWidth property.

Text Border