Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Is it possible to format (bold, italicize, etc) with-in the string only before passing to the text widget?

For example :

String desc = "<bold>Hello<bold> World";
new Text(desc);
like image 740
nypogi Avatar asked Jun 29 '18 02:06

nypogi


People also ask

How do I italicize text in Flutter?

This is how you can achieve a 'Connecting' String in Flutter. In Example, there is a Text Widget which is print your String and it takes text style property to give italic font size. I hope you will get the idea, if this will help you then give the right tick and flag up, Happy Fluttering.

How do you add padding to text flutters?

But in Flutter, if you want add some extra space around a widget, then you wrap it in a Padding widget. Now to add padding, wrap the Text widget with a Padding widget. In Android Studio this can be accomplished by placing your cursor on the widget and pressing Option+Enter (or Alt+Enter in Windows/Linux).


4 Answers

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!'), 
], ), )
like image 53
Bostrot Avatar answered Oct 01 '22 12:10

Bostrot


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))
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
like image 23
Anees Hameed Avatar answered Oct 03 '22 12:10

Anees Hameed


StyledText widget can be used for this.

enter image description here

StyledText(text:desc, 
           styles: { 'bold': ActionTextStyle(fontWeight: FontWeight.bold)},
          );
like image 25
Marko Krstanovic Avatar answered Oct 04 '22 12:10

Marko Krstanovic


You can use simple_rich_text package.

SimpleRichText("*Hello* World")
like image 26
Sanka Werapitiya Avatar answered Oct 01 '22 12:10

Sanka Werapitiya