Använda TextSpan i Flutter: Guide och exempel

Med TextSpan i Flutter kan du skapa rik text genom att använda olika formateringsattribut på olika delar av texten. Det låter dig skapa text med olika stilar, färger, typsnitt och mer. TextSpan används i både widgetarna Text och RichText för att uppnå rikt formaterad text.

Här är ett exempel på hur du använder TextSpan widgeten Text:

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: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

I det här exemplet använder vi Text.rich för att skapa en Text widget med en TextSpan. TextSpan gör det möjligt för oss att skapa flera olika textspann inom en Text widget, var och en med sina egna stilattribut som typsnitt, färg och formatering.

TextSpan kan också användas i RichText widgeten för att uppnå mer avancerade textformateringsmöjligheter. Du är fri att skapa och kombinera flera TextSpan instanser för att skapa rikt formaterad text efter önskemål.

Jag hoppas att det här exemplet hjälper dig att förstå hur du använder TextSpan i Flutter.