Sử dụng RichText trong Flutter: Hướng dẫn và Ví dụ

Trong Flutter, RichText là một widget cho phép bạn tạo văn bản với các kiểu và định dạng khác nhau trong một widget văn bản duy nhất. Bạn có thể sử dụng nhiều widget TextSpan để xác định các phần khác nhau của văn bản với các kiểu khác nhau.

Dưới đây là một ví dụ về cách sử dụng 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('Ví dụ RichText'),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            text: 'Xin chào ',
            style: DefaultTextStyle.of(context).style,
            children: <TextSpan>[
              TextSpan(
                text: 'Flutter',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
              TextSpan(text: ' thật tuyệt vời!'),
            ],
          ),
        ),
      ),
    );
  }
}

Trong ví dụ này, widget RichText được sử dụng để tạo văn bản với các kiểu khác nhau. Các widget TextSpan được sử dụng làm con để xác định các phần khác nhau của văn bản với các kiểu riêng.

• TextSpan đầu tiên được định dạng bằng kiểu văn bản mặc định của ngữ cảnh (trong trường hợp này, nó kế thừa kiểu mặc định của AppBar).
• TextSpan thứ hai áp dụng kiểu font in đậm và màu xanh cho từ "Flutter."
• TextSpan thứ ba đơn giản chỉ thêm văn bản " thật tuyệt vời!" vào cuối.

Bạn có thể tùy chỉnh định dạng, font chữ, màu sắc và các kiểu khác trong mỗi TextSpan theo nhu cầu.

Widget RichText rất hữu ích khi bạn cần áp dụng các kiểu khác nhau cho các phần khác nhau của văn bản, chẳng hạn như khi hiển thị nội dung đã định dạng hoặc làm nổi bật các từ hoặc cụm từ cụ thể.

Hãy thoải mái thử nghiệm với các kiểu và các widget TextSpan lồng nhau khác nhau để đạt được hiệu ứng hình ảnh mong muốn trong ứng dụng của bạn.