Menggunakan RichText di Flutter: Panduan dan Contoh

In Flutter, RichText adalah widget yang memungkinkan Anda membuat teks dengan gaya dan format berbeda dalam satu widget teks. Anda dapat menggunakan beberapa TextSpan widget untuk menentukan bagian teks yang berbeda dengan gaya yang berbeda-beda.

Berikut ini contoh cara penggunaannya RichText:

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('RichText Example'),  
     ),  
      body: Center(  
        child: RichText(  
          text: TextSpan(  
            text: 'Hello ',  
            style: DefaultTextStyle.of(context).style,  
            children: <TextSpan>[  
              TextSpan(  
                text: 'Flutter',  
                style: TextStyle(  
                  fontWeight: FontWeight.bold,  
                  color: Colors.blue,  
               ),  
             ),  
              TextSpan(text: ' is amazing!'),  
            ],  
         ),  
       ),  
     ),  
   );  
  }  
}  

Dalam contoh ini, RichText widget digunakan untuk membuat teks dengan gaya berbeda. Widget TextSpan digunakan sebagai turunan untuk menentukan berbagai bagian teks dengan gaya berbeda.

• Yang pertama TextSpan ditata menggunakan gaya teks default dari konteksnya(dalam hal ini, mewarisi gaya default AppBar).
• Yang kedua TextSpan menerapkan bobot font tebal dan warna biru pada kata " Flutter."
• Yang ketiga TextSpan cukup menambahkan teks " luar biasa!" sampai akhir.

Anda dapat menyesuaikan pemformatan, font, warna, dan gaya lainnya TextSpan sesuai kebutuhan.

Widget ini RichText sangat berguna ketika Anda perlu menerapkan gaya berbeda ke bagian teks berbeda, seperti saat menampilkan konten berformat atau menekankan kata atau frasa tertentu.

Jangan ragu untuk bereksperimen dengan berbagai gaya dan TextSpan widget bersarang untuk mencapai efek visual yang diinginkan di aplikasi Anda.