close

Utilizzo di TextSpan in Flutter: Guida ed esempi

Utilizzando TextSpan in Flutter, è possibile creare testo RTF applicando diversi attributi di formattazione a varie parti del testo. Ti consente di creare testo con stili, colori, caratteri diversi e altro ancora. TextSpan viene utilizzato sia nei Text widget che RichText per ottenere testo riccamente formattato.

Ecco un esempio di come utilizzare TextSpan all'interno 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: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}

In questo esempio, utilizziamo Text.rich per creare un Text widget con estensione TextSpan. TextSpan ci consente di creare più porzioni di testo diverse all'interno di un Text widget, ciascuna con i propri attributi di stile come carattere, colore e formattazione.

TextSpan può essere utilizzato anche all'interno del RichText widget per ottenere funzionalità di formattazione del testo più avanzate. Sei libero di creare e combinare più TextSpan istanze per creare testo riccamente formattato come desideri.

Spero che questo esempio ti aiuti a capire come utilizzare TextSpan in Flutter.