Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I bold (or format) a piece of text within a paragraph?

Tags:

flutter

dart

People also ask

How do you bold in a paragraph?

How to Bold Text in HTML. To bold the text in HTML, use either the strong tag or the b (bold) tag. Browsers will bold the text inside both of these tags the same, but the strong tag indicates that the text is of particular importance or urgency. You can also bold text with the CSS font-weight property set to “bold.”

How do you format bold?

Click the Bold button on the Formatting toolbar (Ctrl+B).

Can I bold words in a text?

To make text bold, select and highlight the text first. Then hold down Ctrl (the control key) on the keyboard and press B on the keyboard.


You should use the RichText widget.

A RichText widget will take in a TextSpan widget that can also have a list of children TextSpans.

Each TextSpan widget can have a different TextStyle.

Here is the example code to render: Hello World

var text = new RichText(
  text: new TextSpan(
    // Note: Styles for TextSpans must be explicitly defined.
    // Child text spans will inherit styles from parent
    style: new TextStyle(
      fontSize: 14.0,
      color: Colors.black,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Hello'),
      new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
 );

[UPDATE]

The below answer fits best for couple of words and not for a paragraph,If you have a long sentence or a paragraph where you need to format a particular text prefer using RichText as suggested by @DvdWasibi in the above answer

[OLD ANSWER]

I like keeping my code short and clean this is How I Would do it add two text fields in a row one with Normal font and another bold,

Note: This may not look good for a long paragraph looks good for Headlines etc.

Row(children: <Widget>[
      Text("Hello"),
      Text("World", style: TextStyle(fontWeight: FontWeight.bold))
    ])
`

and you should get a desired output as "Hello World"


return RichText(
  text: TextSpan(
    text: 'Can you ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'find the',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
        ),
        recognizer: _longPressRecognizer,
      ),
      TextSpan(text: 'secret?'),
    ],
  ),
);

Regex

You can use this widget. The example below always make numbers bold.

import 'package:flutter/material.dart';

class TextBold extends StatelessWidget{
  final String text;
  final String regex;
  static const _separator = " ";

  const TextBold({Key key, this.text, this.regex = r'\d+'}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final parts = splitJoin();

    return Text.rich(TextSpan(
        children: parts.map((e) => TextSpan(
            text: e.text,
            style: (e.isBold)
                ? const TextStyle(fontFamily: 'bold')
                : const TextStyle(fontFamily: 'light')))
            .toList()));
  }

  // Splits text using separator, tag ones to be bold using regex
  // and rejoin equal parts back when possible
  List<TextPart> splitJoin(){
    assert(text!=null);

    final tmp = <TextPart>[];

    final parts = text.split(_separator);

    // Bold it
    for (final p in parts){
      tmp.add(TextPart(p + _separator,p.contains(RegExp(regex))));
    }

    final result = <TextPart>[tmp[0]];
    // Fold it
    if (tmp.length>1) {
      int resultIdx = 0;
      for (int i = 1; i < tmp.length; i++)
        if (tmp[i - 1].isBold != tmp[i].isBold) {
          result.add(tmp[i]);
          resultIdx++;
        }
        else
          result[resultIdx].text = result[resultIdx].text
              + tmp[i].text;
    }

    return result;
  }
}

class TextPart{
  String text;
  bool isBold;

  TextPart(this.text, this.isBold);
}