Jak pogrubić (lub sformatować) fragment tekstu w akapicie?

105

Jak mogę uzyskać wiersz tekstu z innym formatowaniem?

na przykład:

Witaj świecie

Dvdwasibi
źródło

Odpowiedzi:

221

Powinieneś użyć widżetu RichText .

Widżet RichText przyjmie widżet TextSpan, który może mieć również listę elementów podrzędnych TextSpans.

Każdy widżet TextSpan może mieć inny TextStyle .

Oto przykładowy kod do renderowania: 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)),
    ],
  ),
 );
Dvdwasibi
źródło
28

[AKTUALIZACJA]

Poniższa odpowiedź najlepiej pasuje do kilku słów, a nie do akapitu.Jeśli masz długie zdanie lub akapit, w którym chcesz sformatować określony tekst, preferuj użycie tekstu sformatowanego zgodnie z sugestią @DvdWasibi w powyższej odpowiedzi

[STARA ODPOWIEDŹ]

Lubię, gdy mój kod jest krótki i przejrzysty. Oto jak to zrobić, aby dodać dwa pola tekstowe w rzędzie, jedno z czcionką normalną, a drugie pogrubione ,

Uwaga: to może nie wyglądać dobrze w przypadku długiego akapitu, dobrze wygląda w przypadku nagłówków itp.

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

i powinieneś otrzymać żądane wyjście jako „Hello World

maheshmnj
źródło
8
To nie jest dobry pomysł, jeśli zamierzasz mieć akapit tekstu. Każdy tekst () w wierszu tworzy własną pionową / poziomą przestrzeń.
Muhammad Adil
więc jaka jest alternatywa dla używania Row? a jeśli chcę, aby tekst był obok siebie z innym formatowaniem
maheshmnj
3
spójrz na powyższą odpowiedź od @Dvdwasibi, po prostu wypróbuj swoją implementację z dużym akapitem, a znajdziesz dwa różne akapity obok siebie. twoja odpowiedź jest poprawna dla 2/3 słów, ale nie dla akapitu.
Muhammad Adil
1
Zgoda, przy okazji zaktualizowałem odpowiedź. :)
maheshmnj
Nie ma za co .. :)
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?'),
    ],
  ),
);
Parvesh Khan
źródło