21

For example :

String desc = "<bold>Hello<bold> World";
new Text(desc);
4

6 Answers 6

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!'), 
], ), )
4

StyledText widget can be used for this.

enter image description here

StyledText(text:desc, 
           styles: { 'bold': ActionTextStyle(fontWeight: FontWeight.bold)},
          );
1
4

You can use simple_rich_text package.

SimpleRichText("*Hello* World")
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))
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
2

If you're using the styled_text package then this is what you can get:

Styled Text Preview

StyledText(
  style: TextStyle(
    fontSize: 18,
    color: Colors.black,
  ),
  text: '<i>Please</i> make sure you <u><b>verify your email</b></u> before <s>posting</s>',
  tags: defaultStyledTextTags,
)

final defaultStyledTextTags = {
  'b': StyledTextTag(
    style: const TextStyle(fontWeight: FontWeight.bold),
  ),
  'u': StyledTextTag(
    style: const TextStyle(decoration: TextDecoration.underline),
  ),
  's': StyledTextTag(
    style: const TextStyle(decoration: TextDecoration.lineThrough),
  ),
  'i': StyledTextTag(
    style: const TextStyle(fontStyle: FontStyle.italic),
  ),
};
0
 Text(
 date,
 style: TextStyle(
 fontStyle: FontStyle.italic,
 decoration: TextDecoration.underline,
 fontWeight: FontWeight.bold,
 fontSize: 10,
 color: Colors.white ),
               ),
  1. use FontStyle for making text Italic
  2. use decoration for underline under text
  3. use fontWeight for bold

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.