close

Usando TextSpan em Flutter: Guia e Exemplos

Usando TextSpan in Flutter, você pode criar rich text aplicando diferentes atributos de formatação a várias partes do texto. Ele permite criar texto com diferentes estilos, cores, fontes e muito mais. TextSpan é utilizado nos widgets Text e RichText para obter texto formatado com riqueza de detalhes.

Aqui está um exemplo de como usar TextSpan dentro do Text widget:

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('TextSpan Example'),  
     ),  
      body: Center(  
        child: Text.rich(  
          TextSpan(  
            text: 'Hello ',  
            style: TextStyle(fontSize: 20),  
            children: [  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}

Neste exemplo, usamos Text.rich para criar um Text widget com uma extensão TextSpan. TextSpan nos permite criar vários trechos de texto diferentes dentro de um Text widget, cada um com seus próprios atributos de estilo, como fonte, cor e formatação.

TextSpan também pode ser usado no RichText widget para obter recursos de formatação de texto mais avançados. Você é livre para criar e combinar múltiplas TextSpan instâncias para criar texto ricamente formatado conforme desejado.

Espero que este exemplo ajude você a entender como usar TextSpan o Flutter.