Question 75290 in Flutter Question posted in
The official Flutter documentation can be found here.

how to format certain parts of text from api in flutter

I have a text from API, but I want to format it to be bold before displayed to the screen.

Here is the code

return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      state.listExplanation[index].description!, --> this is the text that I want to format
      style: body1(),
    ),

The variable description that I call has API text like this:

"description" : "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."

Nah, before it be displayed to the screen, I want to make only "Lorem Ipsum" and "1500s" to be bold. I only know how to change the text entirely, but to change the text partially, it makes me confuse.

I hope you can give me your advice.

Tags:

3

Answers


  1. 0

    If the text is coming from an API, you can still use the same approach by splitting the text into parts, formatting the parts you want to be bold, and then combining them back together.

    Try this example:

    String apiText = "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
List<String> parts = apiText.split(' ');

TextSpan textSpan = new TextSpan(
  children: parts.map((part) {
    if (part == 'Lorem' || part.endsWith('1500s')) {
      return new TextSpan(
        text: part + ' ',
        style: new TextStyle(fontWeight: FontWeight.bold),
      );
    } else {
      return new TextSpan(
        text: part + ' ',
      );
    }
  }).toList(),
);

return new RichText(text: textSpan);

    We split the text into parts using the split() method, and then loop through each part to determine if it should be formatted as bold. If the part matches the criteria, we create a TextSpan with the fontWeight property set to bold. If the part doesn’t match, we create a TextSpan without any special formatting. Finally, we combine all the TextSpan‘s back together using a RichText widget.

    Login or Signup to reply.
  2. 0

    you can ask your backend developers to return you the text in html format and then use flutter_widget_from_html

    import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final htmlData =
        '<p><b>Lorem Ipsum</b> has been the industry's standard dummy text ever since the <b>1500s</b>.</p>';

    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          HtmlWidget(htmlData),
        ],
      ),
    );
  }
}

    enter image description here

    Login or Signup to reply.
  3. 0

    Suggestions:

    1. You should look out for RichText

    2. Nah, before it be displayed to the screen, I want to make only "Lorem Ipsum" and "1500s" to be bold. I only know how to change the text entirely, but to change the text partially, it makes me confuse.

      Here it is not clear what is the regex you want to follow from the description from the api, Is it , First two words and last word bold ? , If yes you should write proper regex and split the string accordingly.

    Sample Code:

    
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    RichText(
      text: TextSpan(
        style: body1(),
        children: [
          TextSpan(
            text: 'Lorem Ipsum',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          TextSpan(
            text: ' has been the industry's standard dummy text ever since the ',
          ),
          TextSpan(
            text: '1500s',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          TextSpan(
            text: '.',
          ),
        ],
      ),
    ),
  ],
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search