Cara Menggunakan RichText Flutter untuk Teks Multi-Gaya

RichText Flutter memungkinkan Anda menampilkan beberapa gaya teks dalam satu rangkaian kalimat, mulai dari perbedaan warna dan ukuran font hingga teks yang bisa diklik. Widget ini berguna ketika widget Text biasa tidak cukup untuk memenuhi kebutuhan tampilan, seperti harga promo, tautan pada teks persetujuan, atau penyorotan kata hasil pencarian.

Dalam artikel ini, Anda akan mempelajari cara kerja RichText dan TextSpan di Flutter, perbedaan penggunaannya dengan Text dan Text.rich, serta contoh kode yang bisa diterapkan langsung pada aplikasi.

Ringkasan

• RichText Flutter memungkinkan Anda menampilkan beberapa gaya teks dalam satu kalimat, seperti teks tebal, warna berbeda, dan garis bawah.
• TextSpan digunakan untuk menyusun potongan teks beserta gayanya melalui struktur bertingkat yang memungkinkan pewarisan gaya.
• Text, Text.rich, dan RichText memiliki fungsi berbeda. Gunakan Text untuk teks sederhana, Text.rich untuk teks multi-gaya yang mengikuti tema aplikasi, dan RichText ketika membutuhkan kontrol gaya dasar secara manual.
• RichText Flutter dapat diterapkan untuk menampilkan harga promo, membuat teks yang bisa diklik, menyisipkan ikon di tengah kalimat, dan menyorot kata hasil pencarian.
• Pengaturan properti dan pengelolaan resource perlu diperhatikan agar tampilan tetap rapi, responsif, dan efisien. Contohnya, gunakan textScaler untuk penskalaan teks dan panggil dispose() pada TapGestureRecognizer yang dikelola sendiri.

Mengenal RichText dan TextSpan di Flutter

RichText adalah widget yang menampilkan teks dari sebuah pohon TextSpan. Setiap TextSpan membawa potongan teks beserta gayanya, dan bisa memiliki anak berupa TextSpan lain. Karena itulah Anda dapat menggabungkan kata tebal, miring, berwarna, atau bergaris bawah dalam satu kalimat yang sama.

Cara Kerja Pohon TextSpan

Bayangkan TextSpan paling atas sebagai induk yang menentukan gaya dasar. Setiap anak otomatis mewarisi gaya tersebut, dan Anda hanya perlu menimpa bagian yang ingin dibedakan. Misalnya induk berukuran 16 dengan warna hitam, lalu satu anak hanya mengganti ketebalan menjadi bold. Ukuran dan warnanya tetap mengikuti induk.

Kapan Anda Membutuhkannya

Widget ini berguna ketika sebuah kalimat memuat sebagian kata yang perlu ditonjolkan, seperti harga, nama pengguna, atau istilah penting. RichText juga cocok untuk tautan di dalam paragraf, ikon kecil yang menempel di antara kata, dan penyorotan hasil pencarian. Jika seluruh teks memakai satu gaya yang sama, widget Text biasa sudah cukup.

Text, Text.rich, atau RichText untuk Kebutuhan Anda

Ketiganya sering membingungkan pemula karena sama-sama menampilkan teks. Perbedaan terbesarnya ada pada dukungan multi-gaya dan cara mereka mengambil gaya dasar dari tema aplikasi.

Untuk pekerjaan sehari-hari, Text.rich biasanya pilihan paling nyaman karena gaya dasarnya otomatis mengikuti tema. Ia memakai TextSpan yang sama dengan RichText, sehingga Anda tidak perlu belajar sintaks baru.

Mengapa Gaya Dasar Perlu Diatur

RichText tidak mengambil gaya dari tema secara otomatis. Jika Anda tidak memberi gaya pada TextSpan induk, teks bisa tampil dengan ukuran dan warna bawaan yang tidak sesuai desain. Cara paling mudah adalah meminjam gaya dari konteks melalui DefaultTextStyle, seperti pada contoh berikut.

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: const [
      TextSpan(text: 'Paket hosting aktif selama '),
      TextSpan(
        text: '12 bulan',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    ],
  ),
)

Contoh Kode RichText Flutter untuk Kasus Nyata

Berikut empat skenario yang paling sering muncul saat membangun antarmuka aplikasi. Semuanya memakai Text.rich agar gaya dasar tetap mengikuti tema.

Harga Coret dan Harga Promo

Kombinasi harga lama yang dicoret dan harga baru yang menonjol sangat umum di halaman produk. Anda cukup memakai dua TextSpan dengan dekorasi dan warna berbeda.

Text.rich(
  TextSpan(
    children: [
      const TextSpan(
        text: 'Rp200.000 ',
        style: TextStyle(
          color: Colors.grey,
          decoration: TextDecoration.lineThrough,
        ),
      ),
      TextSpan(
        text: 'Rp150.000',
        style: TextStyle(
          color: Colors.red.shade700,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

Teks Persetujuan yang Bisa Diklik

Untuk membuat potongan teks bisa diketuk, pasang TapGestureRecognizer pada properti recognizer milik TextSpan. Recognizer ini memegang sumber daya, jadi Anda wajib membuangnya lewat dispose agar tidak terjadi kebocoran memori. Karena itu, widgetnya perlu berupa StatefulWidget.

class TermsText extends StatefulWidget {
  const TermsText({super.key});

  @override
  State<TermsText> createState() => _TermsTextState();
}

class _TermsTextState extends State<TermsText> {
  late final TapGestureRecognizer _tapRecognizer;

  @override
  void initState() {
    super.initState();
    _tapRecognizer = TapGestureRecognizer()
      ..onTap = () {
        // Arahkan pengguna ke halaman syarat dan ketentuan.
      };
  }

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

  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        text: 'Dengan mendaftar, Anda menyetujui ',
        children: [
          TextSpan(
            text: 'Syarat dan Ketentuan',
            style: const TextStyle(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            ),
            recognizer: _tapRecognizer,
          ),
        ],
      ),
    );
  }
}

Ikon di Tengah Kalimat

Kadang Anda ingin menempelkan ikon centang di samping nama akun. WidgetSpan memungkinkan Anda menaruh widget apa pun di dalam alur teks, dan PlaceholderAlignment mengatur posisi vertikalnya agar sejajar dengan huruf.

Text.rich(
  TextSpan(
    children: [
      const TextSpan(text: 'Akun terverifikasi '),
      WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        child: Icon(Icons.verified, size: 18, color: Colors.blue.shade600),
      ),
    ],
  ),
)

Menyorot Kata Hasil Pencarian

Untuk fitur pencarian, Anda perlu memecah teks berdasarkan kata kunci lalu memberi latar kuning pada bagian yang cocok. Fungsi berikut menghasilkan daftar TextSpan yang tinggal dimasukkan ke properti children.

List<TextSpan> sorotKata(String teks, String kataKunci) {
  if (kataKunci.isEmpty) return [TextSpan(text: teks)];

  final pola = RegExp(RegExp.escape(kataKunci), caseSensitive: false);
  final hasil = <TextSpan>[];
  var awal = 0;

  for (final cocok in pola.allMatches(teks)) {
    if (cocok.start > awal) {
      hasil.add(TextSpan(text: teks.substring(awal, cocok.start)));
    }
    hasil.add(
      TextSpan(
        text: teks.substring(cocok.start, cocok.end),
        style: const TextStyle(backgroundColor: Colors.yellow),
      ),
    );
    awal = cocok.end;
  }

  if (awal < teks.length) {
    hasil.add(TextSpan(text: teks.substring(awal)));
  }
  return hasil;
}

Fungsi RegExp.escape membuat karakter khusus seperti tanda kurung atau titik diperlakukan sebagai teks biasa, sehingga pencarian tidak error ketika pengguna mengetik simbol.

Properti yang Perlu Anda Ketahui

Selain susunan TextSpan, ada beberapa properti yang memengaruhi tampilan akhir. Properti textAlign mengatur perataan paragraf, sedangkan maxLines dan overflow menentukan apa yang terjadi ketika teks terlalu panjang. Properti softWrap mengatur apakah teks boleh pindah baris, dan textDirection berguna untuk bahasa yang ditulis dari kanan ke kiri.

Untuk pengaturan skala huruf sesuai preferensi pengguna, gunakan textScaler karena textScaleFactor sudah ditandai deprecated pada versi Flutter yang lebih baru. Sisanya, seperti textWidthBasis, textHeightBehavior, strutStyle, dan locale, biasanya baru Anda sentuh ketika ada kebutuhan tipografi yang lebih spesifik.

Kesalahan yang Sering Terjadi

Berikut adalah beberapa kesalahan yang umum terjadi ketika menggunakan RichText Flutter.

• Lupa mengatur gaya dasar saat memakai RichText, sehingga teks tampil tidak sesuai tema.
• Tidak memanggil dispose pada TapGestureRecognizer, yang lama-lama menumpuk objek di memori.
• Menyusun satu kalimat dari beberapa Text di dalam Row, padahal perilaku pindah baris menjadi tidak terkendali. Banyak pemula juga mengabaikan PlaceholderAlignment pada WidgetSpan sehingga ikon terlihat naik atau turun dari garis teks.
• Terakhir, jangan lupa menguji tampilan dengan ukuran huruf besar dari pengaturan aksesibilitas, karena teks multi-gaya paling mudah rusak ketika skalanya berubah.

Tips Menjaga Kode Tetap Rapi dan Efisien

Gunakan kata kunci const pada TextSpan yang tidak berubah supaya Flutter tidak perlu membangunnya berulang. Jika gaya yang sama dipakai di banyak tempat, simpan dalam variabel atau TextTheme agar perubahan desain cukup dilakukan sekali. Bagi bagian yang kompleks menjadi fungsi atau widget kecil, seperti contoh penyorot pencarian di atas, supaya mudah diuji dan dibaca oleh rekan satu tim.

Kuasai RichText Flutter, Lalu Siapkan Tempat Terbaik untuk Aplikasi Anda

RichText Flutter memberi Anda kendali penuh atas tampilan teks, mulai dari harga promo, tautan persetujuan, ikon di tengah kalimat, hingga hasil pencarian yang tersorot. Pilih Text.rich untuk kebutuhan harian, pakai RichText ketika ingin mengatur gaya dasar sendiri, dan pastikan setiap recognizer dibuang dengan benar.

Setelah antarmuka aplikasi rapi, langkah berikutnya biasanya menyiapkan sisi server, entah itu API, panel admin, atau hasil build Flutter Web yang ingin dipublikasikan. Anda bisa memulainya dengan hosting murah dari Rumahweb yang praktis dan cukup andal untuk proyek pemula hingga menengah, sehingga Anda dapat fokus menyempurnakan aplikasi tanpa pusing mengurus infrastruktur.

FAQ

Kesimpulan

RichText Flutter merupakan solusi untuk membuat tampilan teks yang lebih dinamis tanpa harus memisahkan setiap bagian menjadi widget teks yang berbeda. Dengan memanfaatkan TextSpan, Anda bisa mengatur gaya tiap bagian teks, menambahkan interaksi, hingga menyisipkan ikon sesuai kebutuhan antarmuka aplikasi.

Untuk kebutuhan sehari-hari, Text.rich bisa menjadi pilihan praktis karena mengikuti gaya tema aplikasi. Sementara itu, RichText cocok ketika Anda membutuhkan kontrol lebih besar terhadap tampilan teks. Pastikan juga Anda mengelola resource dengan benar dan menguji tampilan pada berbagai ukuran layar agar hasilnya tetap nyaman digunakan.

Dengan memahami cara kerja RichText dan TextSpan, Anda dapat membangun antarmuka Flutter yang lebih informatif, konsisten, dan mudah dipelihara.