SelectableText: Khi chữ không còn 'bất động' trong app Flutter!

Chào các "dev-er" Gen Z,

Bạn đã bao giờ tức điên khi lướt app, thấy cái đoạn text rõ ràng mồn một trên màn hình mà không tài nào copy được chưa? Kiểu như, "Ê, thông tin ngay trước mắt mà sao tui không 'tóm' được vậy?" Cảm giác như bị trêu ngươi phải không?

Đó chính là lúc SelectableText của Flutter bước ra sân khấu như một vị cứu tinh! Giảng viên Creyt cam đoan, sau bài này, bạn sẽ làm chủ siêu năng lực biến chữ trên app thành "chữ sống", sẵn sàng để người dùng "tóm" lấy và mang đi bất cứ đâu.

1. SelectableText là gì và để làm gì?

Hiểu đơn giản, SelectableText là một widget sinh ra để giải quyết nỗi đau muôn thuở: cho phép người dùng chọn (select) và sao chép (copy) nội dung văn bản ngay trong ứng dụng của bạn.

Nó giống như bạn có một cuốn sách giấy bình thường (widget Text mặc định) thì chỉ có thể đọc thôi. Nhưng khi bạn "biến hình" nó thành SelectableText, cuốn sách đó bỗng có thêm tính năng highlight và copy y hệt như bạn đang đọc một tài liệu PDF vậy. Người dùng có thể chạm giữ, kéo để chọn đoạn văn bản họ muốn, và một menu nhỏ sẽ hiện ra cho phép họ sao chép.

Tại sao lại cần nó? Vì đôi khi, người dùng không chỉ muốn đọc. Họ muốn lưu lại một câu nói hay, một đoạn code, một địa chỉ email, hay đơn giản là một dòng OTP mà bạn hiển thị. SelectableText chính là cây cầu nối giữa thông tin bạn cung cấp và nhu cầu tương tác của người dùng.

2. Code Ví Dụ Minh Hoạ Rõ Ràng

Để dễ hình dung, chúng ta hãy đặt cạnh nhau một widget Text thông thường và một SelectableText để thấy sự khác biệt nhé.

Gợi Ý Đọc Tiếp

Backdrop trong Flutter: Sân Khấu UI Đa Chiều

6 Lượt xem

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SelectableText Demo của Creyt',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SelectableText: Sức mạnh của sự tương tác'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Đây là một đoạn text KHÔNG THỂ chọn và copy. Hãy thử chạm giữ xem!',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18, color: Colors.redAccent),
              ),
              const SizedBox(height: 40),
              const SelectableText(
                'Đây là một đoạn text CÓ THỂ chọn và copy. Chạm giữ và trải nghiệm sự khác biệt!',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.green,
                ),
                // Một số thuộc tính tùy chỉnh khác của SelectableText
                cursorColor: Colors.blue,
                showCursor: true,
                cursorWidth: 2.0,
                // Khi có sự thay đổi trong vùng chọn
                onSelectionChanged: (TextSelection selection, SelectionChangedCause? cause) {
                  print('Vùng chọn đã thay đổi: ${selection.textInside(this.toString())}');
                },
              ),
              const SizedBox(height: 40),
              const SelectableText.rich(
                TextSpan(
                  text: 'Bạn cũng có thể dùng ',
                  style: TextStyle(fontSize: 16, color: Colors.black87),
                  children: <TextSpan>[
                    TextSpan(
                      text: 'SelectableText.rich ',
                      style: TextStyle(fontWeight: FontWeight.bold, color: Colors.purple),
                    ),
                    TextSpan(
                      text: 'để tạo văn bản đa phong cách và vẫn copy được!',
                    ),
                  ],
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Trong ví dụ trên, bạn sẽ thấy rõ: đoạn văn bản màu đỏ là Text thông thường, bạn không thể làm gì với nó ngoài việc đọc. Còn đoạn màu xanh lá cây và tím là SelectableText, bạn có thể chạm giữ, kéo để chọn và sau đó sao chép (copy) hoặc cắt (cut) tuỳ theo menu ngữ cảnh của hệ điều hành.

3. Mẹo Hay (Best Practices) từ Giảng viên Creyt

1. Dùng đúng chỗ, đúng lúc: Không phải text nào cũng cần SelectableText. Các tiêu đề lớn, label của button, hoặc những đoạn text mang tính trang trí thì không nên dùng. Hãy tưởng tượng bạn cố chọn tiêu đề của một cuốn sách – hơi vô nghĩa đúng không? Chỉ dùng khi người dùng thực sự có nhu cầu tương tác (chọn, copy) với nội dung đó.
2. Tùy chỉnh cursorColor, showCursor, cursorWidth: Để trải nghiệm chọn text mượt mà và đẹp mắt, bạn có thể tùy chỉnh màu sắc và độ dày của con trỏ. Điều này giúp app của bạn trông "pro" hơn nhiều.
3. onSelectionChanged: Đây là một callback cực kỳ hữu ích! Nó cho phép bạn biết khi nào người dùng bắt đầu chọn, thay đổi vùng chọn, hoặc kết thúc việc chọn. Bạn có thể dùng nó để ghi log, hoặc thậm chí là kích hoạt một hành động khác dựa trên văn bản được chọn.
4. SelectableText.rich cho văn bản phức tạp: Nếu bạn cần hiển thị văn bản với nhiều phong cách (in đậm, nghiêng, màu sắc khác nhau) nhưng vẫn muốn nó có thể chọn được, SelectableText.rich với TextSpan là "chân ái" đấy. Nó giống như bạn có một bức tranh ghép từ nhiều mảnh nhỏ, nhưng vẫn có thể "chộp" lấy cả bức tranh một cách dễ dàng.
5. Tránh lạm dụng trong ListView/GridView lớn: Nếu bạn có một danh sách cực dài các SelectableText trong ListView hoặc GridView, đôi khi có thể ảnh hưởng nhẹ đến hiệu suất. Hãy cân nhắc nếu thực sự cần thiết cho mọi item.

4. Ứng dụng Thực Tế: Ai đã dùng SelectableText?

Bạn có thể thấy ý tưởng của SelectableText (hoặc các cơ chế tương tự) ở khắp mọi nơi trong các ứng dụng hàng ngày:

• Ứng dụng ghi chú (Evernote, Google Keep): Bạn muốn copy một đoạn ghi chú quan trọng.
• Ứng dụng đọc sách/tin tức (Kindle, Google News): Highlight một câu nói hay, copy một đoạn văn để chia sẻ.
• Ứng dụng nhắn tin/mạng xã hội (Zalo, Facebook Messenger): Chạm giữ tin nhắn để sao chép nội dung.
• Các trang web, blog, tài liệu: Bất cứ nơi nào có nội dung chữ viết mà bạn muốn người dùng có thể dễ dàng lấy thông tin.

5. Thử nghiệm và Nên dùng cho Case nào?

Thử nghiệm đã từng: Giảng viên Creyt đã từng "đau đầu" khi phát triển một ứng dụng tài liệu nội bộ. Ban đầu dùng Text và nhận vô số feedback kiểu "sao không copy được anh ơi?". Sau khi chuyển sang SelectableText, mọi người "mừng như bắt được vàng". Bài học rút ra là: đừng đánh giá thấp nhu cầu cơ bản của người dùng!

Nên dùng cho các case:

• Hiển thị nội dung dài, chi tiết: Các bài viết, mô tả sản phẩm, điều khoản dịch vụ, FAQ.
• Thông tin cần sao chép nhanh: Mã OTP, mã giảm giá, địa chỉ email, số điện thoại, mật khẩu tạm thời.
• Ứng dụng giáo dục hoặc tài liệu: Cho phép sinh viên/người đọc dễ dàng trích dẫn, sao chép thông tin để học tập hoặc nghiên cứu.
• Nơi người dùng có thể muốn chia sẻ nội dung: Cho phép họ copy một phần nội dung để dán vào ứng dụng khác hoặc chia sẻ qua mạng xã hội.

Không nên dùng cho các case:

• Text trên các nút bấm (Buttons): Người dùng muốn bấm, không muốn chọn.
• Text trang trí hoặc không có ý nghĩa khi sao chép: Ví dụ: "Chào mừng bạn đến với ứng dụng!" - ít ai muốn copy câu này.
• Text là một phần của hình ảnh hoặc biểu tượng: SelectableText chỉ làm việc với văn bản.

Vậy là xong! SelectableText tuy nhỏ mà có võ, phải không các "dev-er"? Hãy dùng nó một cách thông minh để nâng tầm trải nghiệm người dùng trong app Flutter của bạn nhé. Hẹn gặp lại trong những bài học "chất như nước cất" lần sau!