TextSpan gebruiken in Flutter: gids en voorbeelden

Met behulp TextSpan van in Flutter kunt u rijke tekst maken door verschillende opmaakkenmerken toe te passen op verschillende delen van de tekst. Hiermee kunt u tekst maken met verschillende stijlen, kleuren, lettertypen en meer. TextSpan wordt gebruikt binnen zowel de widgets Text als RichText om rijkelijk opgemaakte tekst te verkrijgen.

Hier is een voorbeeld van hoe u het TextSpan binnen de Text widget kunt gebruiken:

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 dit voorbeeld gebruiken we Text.rich een Text widget met de extensie TextSpan. TextSpan stelt ons in staat om binnen een widget meerdere verschillende tekstreeksen te maken Text, elk met zijn eigen stijlkenmerken zoals lettertype, kleur en opmaak.

TextSpan kan ook binnen de widget worden gebruikt RichText om geavanceerdere mogelijkheden voor tekstopmaak te verkrijgen. U bent vrij om meerdere TextSpan exemplaren te maken en te combineren om naar wens rijkelijk opgemaakte tekst te maken.

Ik hoop dat dit voorbeeld je helpt te begrijpen hoe TextSpan je Flutter.