Como coloco em negrito (ou formato) um trecho de texto dentro de um parágrafo?


104

Como posso ter uma linha de texto com formatação diferente?

por exemplo:

Olá mundo

Respostas:


220

Você deve usar o widget RichText .

Um widget RichText terá um widget TextSpan que também pode ter uma lista de TextSpans filhos.

Cada widget TextSpan pode ter um TextStyle diferente .

Aqui está o código de exemplo para renderizar: 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)),
    ],
  ),
 );

27

[ATUALIZAR]

A resposta abaixo se encaixa melhor em algumas palavras e não em um parágrafo. Se você tem uma frase longa ou um parágrafo em que precisa formatar um texto específico, prefira usar RichText conforme sugerido por @DvdWasibi na resposta acima

[RESPOSTA ANTIGA]

Eu gosto de manter meu código curto e limpo. É assim que eu faria isso adicionando dois campos de texto em uma linha, um com fonte normal e outro em negrito ,

Observação: isso pode não parecer bom para um parágrafo longo, parece bom para títulos, etc.

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

e você deve obter uma saída desejada como "Hello World "


8
Esta não é uma boa ideia, se você pretende ter um parágrafo de texto. Cada Texto () dentro da linha cria seu próprio espaço vertical / horizontal.
Muhammad Adil

então qual é a alternativa para usar o Row? e se eu quiser texto lado a lado com formatação diferente
maheshmnj

3
olhe a resposta acima de @Dvdwasibi, tente sua implementação com um parágrafo grande e você encontrará dois parágrafos diferentes lado a lado. sua resposta é correta para 2/3 palavras, mas não para um parágrafo.
Muhammad Adil

1
Concordo, obrigado pela forma como atualizei minha resposta. :)
maheshmnj

De nada .. :)
Muhammad Adil

9
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?'),
    ],
  ),
);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.