Usando RichText em Flutter: Guia e Exemplos

No Flutter, RichText é um widget que permite criar texto com diferentes estilos e formatação dentro de um único widget de texto. Você pode usar vários TextSpan widgets para definir diferentes partes do texto com estilos variados.

Aqui está um exemplo de como usar RichText:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('RichText Example'),  
     ),  
      body: Center(  
        child: RichText(  
          text: TextSpan(  
            text: 'Hello ',  
            style: DefaultTextStyle.of(context).style,  
            children: <TextSpan>[  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: ' is amazing!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Neste exemplo, o RichText widget é utilizado para criar um texto com estilos diferentes. Os TextSpan widgets são usados ​​como filhos para definir as diversas partes do texto com estilos distintos.

  • O primeiro TextSpan é estilizado usando o estilo de texto padrão do contexto(neste caso, ele herda o estilo padrão do AppBar).
  • A segunda TextSpan aplica uma espessura de fonte em negrito e cor azul à palavra " Flutter."
  • O terceiro TextSpan simplesmente adiciona o texto “é incrível!” até o fim.

Você pode personalizar a formatação, fontes, cores e outros estilos de cada um, TextSpan conforme necessário.

O RichText widget é particularmente útil quando você precisa aplicar estilos diferentes a diferentes partes do texto, como ao exibir conteúdo formatado ou enfatizar palavras ou frases específicas.

Sinta-se à vontade para experimentar diferentes estilos e TextSpan widgets aninhados para obter os efeitos visuais desejados em seu aplicativo.