RichText Flutter: Cara Buat Teks Multi Gaya + Contoh Kode

RichText Flutter adalah widget untuk membuat satu paragraf dengan beberapa gaya teks sekaligus. Kamu bisa membuat kata tertentu menjadi bold, memberi warna pada harga, sampai menambahkan link di dalam teks. Artikel ini membahas konsep, contoh kode, properti penting, dan tips terbaik menggunakan fitur ini.

Apa Itu RichText di Flutter?

RichText adalah widget Flutter untuk menampilkan teks dengan beberapa gaya dalam satu blok. Struktur teksnya dibangun menggunakan TextSpan, sehingga setiap bagian bisa memiliki style berbeda tanpa harus memecahnya menjadi beberapa widget Text.

Cara Kerja RichText dan TextSpan

Cara paling mudah memahami RichText adalah menganggap TextSpan sebagai pohon teks.

Satu TextSpan utama menjadi parent, lalu di dalamnya terdapat beberapa TextSpan sebagai children. Setiap span bisa memiliki teks dan gaya masing-masing.

Contohnya:

import 'package:flutter/material.dart';
void main() {
    runApp(const MyApp());
}
class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
   // This widget is
    //the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        title: 'RichText',
        theme: ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: const MyHomePAGE(),
        debugShowCheckedModeBanner: false,
        );
    }
}
class MyHomePAGE extends StatefulWidget {
    const MyHomePAGE({Key? key}) : super(key: key);
   @override
    _MyHomePAGEState createState() => _MyHomePAGEState();
}
class _MyHomePAGEState extends State<MyHomePAGE> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(
            title: const Text('IDwebhost'),
            foregroundColor: Colors.white,
            backgroundColor: Colors.green,),
        body: Center(
            child: RichText(
           // Controls visual overflow
            overflow: TextOverflow.clip,
           // Controls how the text should be aligned horizontally
            textAlign: TextAlign.end,
           // Control the text direction
            textDirection: TextDirection.rtl,
           // Whether the text should break at soft line breaks
            softWrap: true,
           // Maximum number of lines for the text to span
            textScaler: TextScaler.linear(1),
            maxLines: 1,
            text: TextSpan(
            text: 'Hello ',
            style: DefaultTextStyle.of(context).style,
            children: const <TextSpan>[
                TextSpan(
                    text: 'IDwebhost', style: TextStyle(fontWeight: FontWeight.bold)),
            ],
            ),
        )),
        backgroundColor: Colors.lightBlue[50],
        );
    }
}

Pada contoh tersebut, Hello mengikuti style dari parent. Sementara IDwebhost menimpa style tersebut dengan fontWeight: FontWeight.bold.

Pola pewarisan seperti ini cukup penting ketika membuat UI yang memiliki banyak variasi teks. Kamu tidak perlu mendefinisikan seluruh properti style berulang kali.

Baca Juga: Pentingnya Belajar Flutter: Kenali Kelebihan dan Cara Menggunakannya

Kapan Kamu Butuh RichText?

RichText berguna ketika satu kalimat membutuhkan lebih dari satu tampilan visual.

Misalnya:

• Membuat satu kata bold di tengah kalimat.
• Memberi warna berbeda pada harga atau diskon.
• Membuat teks bisa diklik Flutter pada bagian tertentu.
• Menambahkan link di dalam teks, seperti “Syarat dan Ketentuan”.
• Menyisipkan ikon atau badge menggunakan WidgetSpan.
• Menampilkan bagian kecil teks dengan ukuran atau format berbeda.

Dalam desain UI aplikasi mobile, kebutuhan seperti ini sebenarnya cukup sering muncul, terutama pada halaman checkout, login, onboarding, profil, dan halaman detail produk.

Baca Juga: Cara Mudah Instal Flutter di VSCode, Cocok untuk Pemula!

Perbedaan RichText, Text, dan Text.rich

Sebelum langsung menggunakan RichText, ada satu hal yang sering membuat developer bingung: Flutter menyediakan Text, RichText, dan Text.rich.

Widget	Multi gaya	Mewarisi DefaultTextStyle	Kompleksitas	Cocok untuk
Text	Tidak secara langsung	Ya	Rendah	Teks dengan satu gaya
RichText	Ya	Tidak otomatis	Sedang	Kontrol teks yang lebih spesifik
Text.rich	Ya	Ya	Sedang	Kebanyakan kebutuhan teks multi gaya

Text cocok ketika seluruh kalimat menggunakan style yang sama.

Sementara itu, RichText dan Text.rich sama-sama menggunakan struktur TextSpan. Perbedaan praktisnya, Text.rich mewarisi DefaultTextStyle seperti widget Text biasa.

Karena itu, untuk kebutuhan sehari-hari, Text.rich sering menjadi pilihan yang lebih praktis. Gunakan RichText ketika kamu memang membutuhkan kontrol langsung terhadap widget tersebut dan tidak ingin bergantung pada DefaultTextStyle.

Kenapa Harus Set Base Style?

Ini salah satu detail yang mudah terlewat.

RichText tidak otomatis mengambil DefaultTextStyle dari lingkungan widget seperti Text. Akibatnya, kalau root TextSpan tidak diberi style, tampilan teks bisa berbeda dari tipografi yang digunakan aplikasi.

Cara aman adalah mengambil style bawaan:

style: DefaultTextStyle.of(context).style,

Jadi, ketika kamu sedang belajar Flutter, jangan hanya menghafal struktur TextSpan. Pahami juga bagaimana style diwariskan dari parent ke child.

Contoh Kode RichText untuk Kasus Nyata

Sekarang masuk ke bagian yang lebih dekat dengan aplikasi sebenarnya.

Harga dengan Warna dan Bold Berbeda

Misalnya kamu ingin menampilkan informasi harga seperti:

Total: Rp49.000 per bulan

Kode yang bisa digunakan:

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: const [
      TextSpan(text: 'Total: '),
      TextSpan(
        text: 'Rp49.000',
        style: TextStyle(
          color: Colors.green,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: ' per bulan'),
    ],
  ),
)

Hasilnya tetap satu kalimat, tetapi Rp49.000 memiliki warna dan ketebalan font yang berbeda.

Pendekatan seperti ini lebih fleksibel daripada membuat tiga widget Text terpisah.

Teks Persetujuan dengan Kata “Syarat dan Ketentuan”

Kasus lain yang sering ditemukan adalah checkbox persetujuan.

Misalnya:

Saya menyetujui Syarat dan Ketentuan yang berlaku.

Bagian “Syarat dan Ketentuan” bisa dibuat berbeda dan nantinya dijadikan area interaktif.

Text.rich(
  TextSpan(
    children: [
      const TextSpan(
        text: 'Saya menyetujui ',
      ),
      TextSpan(
        text: 'Syarat dan Ketentuan',
        style: const TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.w600,
          decoration: TextDecoration.underline,
        ),
      ),
      const TextSpan(
        text: ' yang berlaku.',
      ),
    ],
  ),
)

Jika bagian tersebut perlu membuka halaman tertentu ketika disentuh, kamu bisa menggunakan TapGestureRecognizer.

final termsTap = TapGestureRecognizer()
  ..onTap = () {
    // Buka halaman Syarat dan Ketentuan
  };

Kemudian pasangkan pada TextSpan:

TextSpan(
  text: 'Syarat dan Ketentuan',
  style: const TextStyle(
    color: Colors.blue,
    decoration: TextDecoration.underline,
  ),
  recognizer: termsTap,
)

Untuk implementasi production, jangan lupa memanggil dispose() pada recognizer ketika widget Stateful dihancurkan:

@override
void dispose() {
  termsTap.dispose();
  super.dispose();
}

Ini penting karena gesture recognizer menyimpan resource. Lupa melakukan dispose dapat menimbulkan memory leak yang cukup sulit dilacak.

Menyisipkan Ikon dengan WidgetSpan

TextSpan hanya menangani teks. Kalau kamu ingin menyisipkan widget, gunakan WidgetSpan.

Contohnya, menampilkan ikon centang setelah username:

Text.rich(
  TextSpan(
    children: [
      const TextSpan(text: 'Ade Gusti '),
      WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        child: Icon(
          Icons.verified,
          size: 16,
          color: Colors.blue,
        ),
      ),
    ],
  ),
)

WidgetSpan berguna untuk kebutuhan seperti badge, ikon verifikasi, atau elemen UI kecil yang perlu berada dalam aliran teks.

Contoh Lain: Highlight Hasil Pencarian

RichText juga cocok untuk fitur pencarian.

Misalnya pengguna mencari kata flutter dalam sebuah paragraf. Kata yang cocok dapat diberi background berbeda.

Konsep sederhananya adalah memecah teks berdasarkan hasil pencarian, kemudian setiap bagian dimasukkan ke dalam TextSpan.

Text.rich(
  TextSpan(
    children: [
      const TextSpan(text: 'Belajar '),
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          backgroundColor: Colors.yellow,
          fontWeight: FontWeight.bold,
        ),
      ),
      const TextSpan(text: ' untuk membuat aplikasi mobile.'),
    ],
  ),
)

Untuk aplikasi nyata, proses pencocokan tentu sebaiknya dibuat dinamis menggunakan RegExp atau metode parsing yang sesuai.

Properti RichText yang Wajib Kamu Tahu

Selain text, RichText memiliki beberapa properti yang sering digunakan ketika mengatur layout teks.

Properti	Fungsi
textAlign	Mengatur perataan teks secara horizontal
maxLines	Membatasi jumlah baris
overflow	Menentukan perilaku ketika teks melebihi ruang
softWrap	Mengatur apakah teks boleh melakukan wrapping
textDirection	Menentukan arah teks, seperti LTR atau RTL
textScaler	Mengatur skala ukuran teks
textWidthBasis	Menentukan dasar pengukuran lebar teks
textHeightBehavior	Mengatur perilaku tinggi teks
strutStyle	Mengatur metrik dan tinggi baris
locale	Menentukan locale yang digunakan saat merender teks

Perlu diperhatikan bahwa textScaleFactor sudah deprecated pada API Flutter modern. Untuk kode baru, gunakan textScaler.

Contoh:

RichText(
  textScaler: const TextScaler.linear(1.0),
  text: const TextSpan(
    text: 'Contoh teks',
  ),
)

Kamu juga mungkin menemukan contoh RichText yang menggunakan:

textDirection: TextDirection.rtl,
maxLines: 1,

Kombinasi tersebut valid, tetapi bukan konfigurasi yang harus digunakan untuk semua kasus. TextDirection.rtl misalnya lebih relevan ketika menangani bahasa yang memang ditulis dari kanan ke kiri.

Tips Membuat RichText Flutter yang Efektif

Ada beberapa kebiasaan yang akan membuat implementasi RichText lebih rapi.

Pertama, default-kan Text.rich. Jika kebutuhanmu hanya membuat beberapa bagian teks berbeda style, Text.rich biasanya lebih sederhana.

Kedua, tentukan base style di root span. Ini mencegah tampilan teks tidak konsisten dengan typography aplikasi ketika menggunakan RichText.

Ketiga, gunakan const untuk bagian yang statis.

const TextSpan(
  text: 'Hello ',
)

Kebiasaan kecil ini membantu mengurangi object allocation yang tidak diperlukan.

Keempat, jangan gunakan Row berisi banyak Text untuk membuat satu kalimat.

Cara seperti ini:

Row(
  children: [
    Text('Harga '),
    Text('Rp49.000'),
    Text(' per bulan'),
  ],
)

berisiko menimbulkan masalah ketika teks harus turun ke baris berikutnya. RichText dengan TextSpan dapat melakukan wrapping sebagai satu kesatuan.

Kelima, atur PlaceholderAlignment ketika menggunakan WidgetSpan. Tanpa alignment yang tepat, ikon atau widget inline bisa terlihat terlalu tinggi atau rendah dibandingkan baseline teks.

Terakhir, jangan lupakan accessibility. Jika teks visual menggunakan format yang sulit dibaca screen reader, pertimbangkan penggunaan semanticsLabel agar informasi yang dibacakan tetap jelas.

Kesalahan Umum Saat Menggunakan RichText

Beberapa kesalahan yang cukup sering muncul antara lain:

• Lupa memberikan base style pada root TextSpan.
• Tidak melakukan dispose() pada TapGestureRecognizer.
• Menggunakan Row dan banyak Text untuk satu kalimat.
• Menggunakan RichText ketika seluruh teks sebenarnya memiliki satu style.
• Mengabaikan PlaceholderAlignment pada WidgetSpan.
• Membuat terlalu banyak TextSpan padahal sebagian besar teks memiliki style yang sama.
• Mengabaikan text scaling dan accessibility.

Prinsip sederhananya: gunakan RichText karena memang ada bagian teks yang perlu diperlakukan berbeda, bukan sekadar karena widget tersebut terlihat lebih fleksibel.

Kesimpulan

RichText menjadi salah satu widget yang berguna ketika kamu perlu membuat teks multi gaya dalam satu blok. Mulai dari kata yang dibuat bold, harga berwarna, link inline, sampai ikon menggunakan WidgetSpan, semuanya bisa dibangun melalui struktur TextSpan.

Untuk kebutuhan sehari-hari, Text.rich sering menjadi pilihan yang lebih praktis. Namun ketika membutuhkan kontrol yang lebih spesifik terhadap rendering teks, RichText tetap bisa diandalkan.

Kalau aplikasi Flutter-mu menampilkan konten dari WordPress, seperti artikel, berita, atau katalog produk, kamu membutuhkan hosting yang stabil untuk menyimpan dan mengelola konten tersebut. Hosting untuk WordPress dari IDwebhost bisa menjadi pilihan praktis untuk kebutuhan ini. 

Dengan infrastruktur hosting yang disiapkan untuk WordPress, kamu bisa lebih fokus mengembangkan aplikasi Flutter tanpa harus repot mengelola kebutuhan hosting website dari awal.