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

TextSpan trong Flutter là một phần của hệ thống Rich Text, cho phép bạn tạo văn bản với định dạng phong phú, bao gồm nhiều đoạn văn bản với các thuộc tính khác nhau như màu sắc, font, đường gạch chân và nhiều hơn nữa. TextSpan được sử dụng trong cả Text widget và RichText widget để tạo văn bản có định dạng phong phú.

Dưới đây là một ví dụ về cách sử dụng TextSpan trong Text widget:

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('TextSpan Example'),
      ),
      body: Center(
        child: Text.rich(
          TextSpan(
            text: 'Hello ',
            style: TextStyle(fontSize: 20),
            children: [
              TextSpan(
                text: 'Flutter',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
              TextSpan(text: '!'),
            ],
          ),
        ),
      ),
    );
  }
}

Trong ví dụ này, chúng ta sử dụng Text.rich để tạo một Text widget với TextSpan. TextSpan cho phép chúng ta tạo nhiều đoạn văn bản khác nhau trong một Text widget, mỗi đoạn văn bản có thuộc tính riêng như font, màu sắc và định dạng.

TextSpan cũng có thể được sử dụng trong RichText widget để tạo những khả năng định dạng phong phú hơn. Bạn có thể tự do tạo và kết hợp các TextSpan để tạo ra văn bản với định dạng phong phú theo ý muốn.

Mong rằng ví dụ trên đã giúp bạn hiểu cách sử dụng TextSpan trong Flutter.