Menggunakan RichText dalam Flutter: Panduan dan Contoh

In Flutter, RichText ialah widget yang membolehkan anda mencipta teks dengan gaya dan pemformatan yang berbeza dalam satu widget teks. Anda boleh menggunakan berbilang TextSpan widget untuk menentukan bahagian teks yang berbeza dengan gaya yang berbeza-beza.

Berikut ialah contoh cara menggunakan 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 mencipta teks dengan gaya yang berbeza. Widget TextSpan digunakan sebagai kanak-kanak untuk menentukan pelbagai bahagian teks dengan gaya yang berbeza.

• Yang pertama TextSpan digayakan menggunakan gaya teks lalai konteks(dalam kes ini, ia mewarisi gaya lalai AppBar).
• Yang kedua TextSpan menggunakan berat fon tebal dan warna biru pada perkataan " Flutter."
• Yang ketiga TextSpan hanya menambah teks "sangat menakjubkan!" hingga akhirnya.

Anda boleh menyesuaikan pemformatan, fon, warna dan gaya lain dalam setiap satu TextSpan mengikut keperluan.

Widget ini RichText amat berguna apabila anda perlu menggunakan gaya yang berbeza pada bahagian teks anda yang berbeza, seperti semasa memaparkan kandungan berformat atau menekankan perkataan atau frasa tertentu.

Jangan ragu untuk mencuba gaya yang berbeza dan TextSpan widget bersarang untuk mencapai kesan visual yang diingini dalam apl anda.