Is there a way of making the first part of formatted string bold?

JoshuaaMarkk 0
Viewed 37

Is there a way of making "${innerItem.key}" bold? Thanks

List<Map<String, dynamic>> incidentList = [
                    for (final json in listNode.map((x) => x.toJson()))
                      {
                        'Code': json['field'][0]['field_value'],
                        'Description': json['field'][1]['field_value'],
                        'Organisation Unit': json['field'][2]['field_value'],
                        'Date Reported': json['field'][3]['field_value'],
                        'Status': json['field'][4]['field_value'],
                        'RunHyperlink' : json['run_hyperlink']
                      }
                  ];

                  final List<String> values =  [];
                  for(final item in incidentList){
                    String groupedElement = "";
                    for(var innerItem in item.entries)
                    {

                      groupedElement += "${innerItem.key}  : ${innerItem.value}\n";
                    }
                    values.add(groupedElement);
                  }

                  await WriteCache.setListString(key: 'cache4', value: values);


                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => LossEvent()));

The string will be stored in "values" and will then be accessed by "snapshot.data[index]". Is there a way of making "${innerItem.key} bold?" before storing it into "values"?

dart flutter
2 Answers

You are looking for RichText:

Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text: "${innerItem.key}: ",
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(text: "${innerItem.value}\n"),
    ],
  ),
)

And of course, it will have to be a list of Widget, and not string

HTMHell0

You can use the flutter_html package and the to put a String with HTML format

ex:

Html(
  data: '<body><b>This text is gonna be bold</b><br>This gonna be normal</body>',
  style: {
            'body': Style(
              fontSize: 18,
            ),
            'b': Style(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
);

Also, you can customize the styling of your text using HTML tags(or your custom tags) from styles Map property.

To implement the html tags in the groupElement, just do it like this:

for(var innerItem in item.entries)
                    {

                      groupedElement += "<body><b>${innerItem.key}</b>  : ${innerItem.value}\n</body>";
                    }
                    values.add(groupedElement);

I don't know why you use the '\n' but you can replace it with the break line html tag
if it suits you

Prodromos Sarakinou0
Related