Menggunakan TextSpan dalam Flutter: Panduan dan Contoh

Menggunakan TextSpan dalam Flutter, anda boleh mencipta teks kaya dengan menggunakan atribut pemformatan yang berbeza pada pelbagai bahagian teks. Ia membolehkan anda membuat teks dengan gaya, warna, fon dan banyak lagi yang berbeza. TextSpan digunakan dalam kedua-dua widget Text dan RichText untuk mencapai teks berformat yang kaya.

Berikut ialah contoh cara menggunakan TextSpan dalam 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: '!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Dalam contoh ini, kami gunakan Text.rich untuk mencipta Text widget dengan TextSpan. TextSpan membolehkan kami mencipta pelbagai rentang teks yang berbeza dalam Text widget, masing-masing dengan atribut penggayaan sendiri seperti fon, warna dan pemformatan.

TextSpan juga boleh digunakan dalam RichText widget untuk mencapai keupayaan pemformatan teks yang lebih maju. Anda bebas untuk mencipta dan menggabungkan berbilang TextSpan contoh untuk menghasilkan teks berformat kaya seperti yang dikehendaki.

Saya harap contoh ini membantu anda memahami cara menggunakan TextSpan dalam Flutter.