close

Usando TextSpan en Flutter: Guía y ejemplos

Usando TextSpan en Flutter, puede crear texto enriquecido aplicando diferentes atributos de formato a varias partes del texto. Te permite crear texto con diferentes estilos, colores, fuentes y más. TextSpan se utiliza tanto en los widgets Text como RichText para lograr texto con formato enriquecido.

Aquí hay un ejemplo de cómo usarlo TextSpan dentro del 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: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}

En este ejemplo, utilizamos Text.rich para crear un Text widget con una extensión TextSpan. TextSpan nos permite crear múltiples espacios de texto diferentes dentro de un Text widget, cada uno con sus propios atributos de estilo, como fuente, color y formato.

TextSpan También se puede utilizar dentro del RichText widget para lograr capacidades de formato de texto más avanzadas. Eres libre de crear y combinar varias TextSpan instancias para crear texto con el formato enriquecido que desees.

Espero que este ejemplo te ayude a entender cómo usarlo TextSpan en Flutter.