Menggunakan TextSpan di Flutter: Panduan dan Contoh

Dengan menggunakan TextSpan in Flutter, Anda dapat membuat teks kaya dengan menerapkan atribut pemformatan berbeda ke berbagai bagian teks. Ini memungkinkan Anda membuat teks dengan berbagai gaya, warna, font, dan banyak lagi. TextSpan digunakan dalam widget Text dan RichText untuk menghasilkan teks berformat kaya.

Berikut ini contoh cara menggunakan TextSpan di 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 menggunakan Text.rich untuk membuat Text widget dengan ekstensi TextSpan. TextSpan memungkinkan kita membuat beberapa rentang teks berbeda dalam Text widget, masing-masing dengan atribut gayanya sendiri seperti font, warna, dan pemformatan.

TextSpan juga dapat digunakan dalam RichText widget untuk mencapai kemampuan pemformatan teks yang lebih canggih. Anda bebas membuat dan menggabungkan beberapa TextSpan contoh untuk membuat teks berformat kaya sesuai keinginan.

Saya harap contoh ini membantu Anda memahami cara TextSpan menggunakan Flutter.