19

For example : 

String desc = "<bold>Hello<bold> World";
new Text(desc);
BattleTested_закалённый в бою
  • 4,037
  • 5
  • 26
  • 47
Ny Regency
  • 1,620
  • 8
  • 25
  • 43
  • You shouldnt be using those tags anymore. Its archaic and I believe is depreciated. That being said.... What happens when you pass A string into the Text Constructor? My bet.... It will show the text but not render the HTML. Reason being: Its a Text object. There isnt any html involved.. – Fallenreaper Jun 29 '18 at 03:53
  • 1
    Possible duplicate of [How do I bold (or format) a piece of text within a paragraph?](https://stackoverflow.com/questions/41557139/how-do-i-bold-or-format-a-piece-of-text-within-a-paragraph) – Derek Pollard Jun 29 '18 at 04:03
  • You can also use https://pub.dartlang.org/packages/flutter_markdown, https://pub.dartlang.org/packages/flutter_html_view – Günter Zöchbauer Jun 29 '18 at 05:12
  • You can make your use Rich Text Widget with the formatting done like in this answer https://stackoverflow.com/a/61253256/12347300 – Harshvardhan R Jan 02 '21 at 10:55

4 Answers4

12

You can use the flutter_html_view package for that.

String html = '<bold>Hello<bold> World';

new HtmlTextView(data: html);

If you just want different styles you can use a RichText widget with TextSpans like this.

new RichText( text: new TextSpan(text: 'Hello ', style: DefaultTextStyle.of(context).style, children:          
<TextSpan>[
new TextSpan(text: 'bold', style: new TextStyle(fontWeight: FontWeight.bold)), 
new TextSpan(text: ' world!'), 
], ), )
Bostrot
  • 5,767
  • 3
  • 37
  • 47
3

You can have a RichText widget, which can take TextSpan as its child. TextSpan can then take multiple TextSpan as its children, and each TextSpan can have its own styles and gesture detectors. An example of how to crate "read more" privacy statement with onTap gesture detector is below. This will give an output as shown below and when clicked on "Read" the app will be routed to '/privacy' page.

enter image description here

class _LoginViewState extends State<LoginView> {
  TapGestureRecognizer _routeToPrivacy;

  @override
  void initState() {
    super.initState();
    _routeToPrivacy= TapGestureRecognizer()..onTap = routeToPrivacy;
  }

  void routeToPrivacy() {
    Navigator.pushNamed(context, '/privacy');
  }

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Container(
          width: 200,
          child: Column(  
              RichText(
                text: TextSpan(
                  style: TextStyle(
                      color: Colors.blue.shade900,
                      fontFamily: GoogleFonts.lato().fontFamily),
                  children: [
                    TextSpan(
                      text: 'By signing up you accepts our privacy policy. ',
                    ),
                    TextSpan(
                        recognizer: _routeToPrivacy,
                        text: "Read",
                        style: TextStyle(
                            color: Colors.red.shade500,
                            fontWeight: FontWeight.bold))
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
Anees Hameed
  • 5,916
  • 1
  • 39
  • 43
2

StyledText widget can be used for this.

enter image description here

StyledText(text:desc, 
           styles: { 'bold': ActionTextStyle(fontWeight: FontWeight.bold)},
          );
Marko Krstanovic
  • 81
  • 8
2

You can use simple_rich_text package.

SimpleRichText("*Hello* World")
Sanka Werapitiya
  • 102
  • 3