'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);
stringdartflutter


Solution 1:[1]

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))
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Solution 2:[2]

StyledText widget can be used for this.

enter image description here

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

Solution 3:[3]

You can use simple_rich_text package.

SimpleRichText("*Hello* World")

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anees Hameed
Solution 2 Marko Krstanovic
Solution 3 Sanka Werapitiya

Related Questions