Vai trò của key trong Flutter

Đã bao giờ bạn thay đổi dữ liệu trong list view và thông báo cho list view cập nhật lại giao diện nhưng nó lại không thay đổi theo ý muốn của bạn hay hiển thị một đường nhưng dữ liệu lại một nẻo hay chưa. Key chính là chìa khóa để bạn có thể giải quyết vấn đề này.

I. Key là gì trong Flutter

Trong Flutter, Key là một đối tượng định danh duy nhất được sử dụng để xác định một widget trong cây widget. Mỗi widget trong cây widget cần có một Key duy nhất để Flutter có thể xác định và theo dõi các thay đổi của widget đó. Nó giúp cho Flutter biết được widget nào đã bị thay đổi, được thêm mới hoặc bị xóa đi.

Mỗi loại Key có các ứng dụng và tình huống sử dụng khác nhau trong Flutter. Việc lựa chọn loại Key phù hợp phụ thuộc vào yêu cầu cụ thể của ứng dụng và cách bạn muốn xác định và quản lý các widget trong cây widget.

Ví Dụ:

Giả sử chúng ta có một danh sách các hình ảnh trong Flutter và muốn hiển thị chúng dưới dạng một danh sách các widget hình ảnh. Mỗi hình ảnh có một ID duy nhất được gán cho nó.

Nếu chúng ta không sử dụng Key để xác định mỗi widget hình ảnh trong danh sách thì Flutter sẽ không thể phân biệt được các widget này khác nhau cái gì khi chúng thay đổi dữ liệu trong danh sách. Kết quả là, khi chúng ta thực hiện các thao tác như xoá hoặc cập nhật một widget trong danh sách, Flutter sẽ thực hiện các thay đổi cho tất cả các widget trong danh sách, thậm chí cho những widget không có thay đổi, hoặc tệ hơn là hiển thị một đường trong khi data bên dưới nó là của một hình ảnh khác.

Giải pháp:

Tuy nhiên, nếu chúng ta sử dụng Key để xác định mỗi widget hình ảnh, chẳng hạn là ValueKey, mỗi widget sẽ được định danh duy nhất và Flutter sẽ biết chính xác những widget nào cần được cập nhật hoặc thay đổi khi có sự thay đổi trong danh sách.

Một Ví Dụ Khác:

Khi bạn muốn cập nhật một danh sách các widget và bạn muốn giữ nguyên vị trí của các widget đã được chọn trước đó. Nếu không sử dụng Key, khi bạn cập nhật danh sách các widget, các widget đã được chọn trước đó sẽ bị mất đi và bạn sẽ phải chọn lại từ đầu. Nhưng nếu sử dụng Key, Flutter sẽ biết được widget nào đã được chọn trước đó và giữ nguyên vị trí của chúng.

II. Phân loại các loại Key trong Flutter

1 Global Key

GlobalKey là một Key duy nhất trong toàn bộ ứng dụng Flutter. Nó được sử dụng để xác định và thao tác trực tiếp với một widget cụ thể thường là Widget đầu trong cây để có thể truy cập ở bất kỳ nơi nào trong ứng dụng.

2 Value Key

ValueKey là một loại Key dựa trên giá trị. Nó được sử dụng để xác định một widget dựa trên giá trị của nó. ValueKey được sử dụng khi bạn muốn xác định một widget theo một giá trị cụ thể, chẳng hạn như một ID hoặc một chuỗi.

3 Object Key

ObjectKey là một loại Key dựa trên đối tượng. Nó được sử dụng để xác định một widget dựa trên một đối tượng cụ thể. ObjectKey thường được sử dụng khi bạn muốn xác định một widget dựa trên một đối tượng mà bạn không thể xác định bằng giá trị.

4 Unique Key

UniqueKey là một loại Key duy nhất được tạo tự động cho mỗi widget. Nó được sử dụng khi bạn cần một Key duy nhất cho một widget nhưng không quan tâm đến giá trị cụ thể của Key.

Chúng ta sẽ đi tìm hiểu cụ thể từng loại key ở phần tiếp theo.

III. Tìm hiểu về Global Key

Global key trong Flutter là một đối tượng được sử dụng để định danh một widget duy nhất trong cây widget. Nó cung cấp truy cập đến các đối tượng khác liên quan đến các phần tử đó, chẳng hạn như BuildContext. Với StatefulWidget, GlobalKey cũng cung cấp truy cập đến State của widget. GlobalKey được sử dụng để duy trì trạng thái của widget khi nó được di chuyển từ một vị trí trong cây sang một vị trí khác trong cây.

Ví Dụ:

Bạn muốn hiển thị cùng một widget trên hai màn hình khác nhau, nhưng tất cả các trạng thái là giống nhau.

1 Vai trò của Global Key

1. Tìm kiếm và truy cập widget ở bất kỳ đâu.
2. Lưu trữ trạng thái của Widget GlobalKey và duy trì trạng thái của widget ngay cả khi widget đó không còn nằm trong cây Widget.
3. Sử dụng để điều hướng màn hình trong ứng dụng. Chúng ta hay sử dụng Global Key để lấy context của widget root để show một dialog chẳng hạn.

2 Khi nào sử dụng Global Key

1. Điểu khiển widget con từ widget cha

GlobalKey cho phép chúng ta truy cập và tương tác với các widget con từ widget cha. Chẳng hạn, khi cần gọi phương thức hoặc truy cập thuộc tính của một widget con, chúng ta có thể sử dụng GlobalKey để làm điều đó.

2. Thao tác trên widget bên ngoài cây widget hiện tại

GlobalKey cho phép chúng ta thực hiện thao tác trên một widget nằm ngoài cây widget hiện tại.

Ví dụ, khi cần thao tác trên một widget đã được khởi tạo từ một phương thức hoặc class khác.

3. Truy cập trạng thái của Widget

GlobalKey cung cấp khả năng truy cập trực tiếp đến trạng thái của một widget. Chúng ta có thể sử dụng GlobalKey để truy cập các phương thức hoặc thuộc tính của widget và cập nhật trạng thái của nó.

3 Ví dụ sử dụng Global Key

Dưới đây là một ví dụ về việc sử dụng global key trong flutter để duy trì trạng thái của widget khi nó được di chuyển từ một màn hình này qua màn hình khác.

import 'package:flutter/material.dart';

class Example extends StatefulWidget {
  const Example(this.child, {Key? key, this.foo = false,  }) : super(key: key);
  final Widget child;
  final bool foo;

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State {
  final key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final child = KeyedSubtree(
      key: key,
      child: widget.child,
    );
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            setState(() {});
          },
          child: Text('Rebuild'),
        ),
        widget.foo ? child : Container(),
      ],
    );
  }
}

IV. Tìm hiểu về Value Key trong Flutter

ValueKey trong Flutter là một loại Key được sử dụng để xác định một widget trong cây widget dựa trên giá trị của nó. Vai trò chính của ValueKey là định danh duy nhất một widget trong cây widget.

1 Khi nào sử dụng Value Key

1. Cập nhật một danh sách các Widget: Khi cần cập nhật một danh sách các widget, ValueKey được sử dụng để định danh mỗi widget trong danh sách. Khi danh sách thay đổi, Flutter sẽ so sánh các giá trị của ValueKey để xác định xem các widget đã thêm, sửa đổi hay xóa.
2. Xác định Widget trong ListView, GridView: Khi sử dụng ListView hoặc GridView, ValueKey được sử dụng để xác định và duy trì trạng thái của các widget trong danh sách. Điều này đảm bảo rằng các widget không bị tạo lại khi danh sách thay đổi.

2 Cách sử dụng

Bước1:

Chúng ta cần xác định giá trị độc nhất cho Value key, thường chúng ta sử dụng id nếu có, hoặc giá trị nhưng mà giá trị này bạn cho nó phải là duy nhất trong danh nhé.

Bước 2:

Chúng ta sẽ gán vào key cho widget item trong một danh sách

ListView(
  children: [
    ListTile(
      key: ValueKey('John Doe'),
      title: Text('John Doe'),
    ),
    ListTile(
      key: ValueKey('Jane Smith'),
      title: Text('Jane Smith'),
    ),
    // ...
  ],
)

V. Tìm hiểu về Object Key

1 Khái niệm về Object Key trong Flutter

ObjectKey trong Flutter là một loại Key được sử dụng để xác định một widget trong cây widget dựa trên đối tượng thực tế của nó.

Điều đặc biệt về ObjectKey là nó so sánh các đối tượng thực tế bằng cách sử dụng toán tử “==” thay vì so sánh địa chỉ bộ nhớ như làm việc trong ValueKey.

Vai trò chính của ObjectKey là định danh duy nhất một widget trong cây widget dựa trên đối tượng thực tế của nó. Điều này đảm bảo rằng khi đối tượng thay đổi, widget tương ứng cũng được cập nhật hoặc tái tạo.

Ví Dụ:

Giả sử mỗi một widget con chứa một tập hợp dữ liệu phức tạp , ví dụ một ứng dụng sổ địa chỉ cho thông tin người dùng . Bất kỳ trường thông tin nào chẳng hạn như tên , ngày sinh có thể giống một người khác nhưng mỗi 1 tập dữ liệu lại phải là duy nhất . Trong trường hợp này thì nên dùng key này .

2 Khi nào sử dụng Object Key

1. Cập nhật một danh sách các widget: Khi cần cập nhật một danh sách các widget dựa trên đối tượng thực tế của chúng, ObjectKey được sử dụng để định danh mỗi widget trong danh sách. Khi danh sách thay đổi và đối tượng thay đổi, Flutter sẽ so sánh các đối tượng thực tế bằng toán tử “==” để xác định xem các widget đã thêm, sửa đổi hay xóa.
2. Xác định widget trong ListView, GridView: Khi sử dụng ListView hoặc GridView và cần xác định các widget dựa trên đối tượng thực tế của chúng, ObjectKey được sử dụng để định danh và duy trì trạng thái của các widget trong danh sách
3. Xác định widget trong cây widget: Khi cần xác định một widget trong cây widget dựa trên đối tượng thực tế của nó, ObjectKey được sử dụng để định danh widget và đảm bảo rằng widget không bị tái tạo hoặc cập nhật nếu đối tượng không thay đổi.

3 Cách sử dụng

Bước 1: Đầu tiên chúng cần tạo một đối tượng chứa các thuộc tính mà chúng ta cần định danh, ví dụ Sinh viên có tên, tuổi, địa chỉ, …

Bước 2: Sau đó chúng ta gắn nguyên một đối tượng vào Object Key của Widget

Widget myWidget = ListTile(
  key: ObjectKey(student), // Sử dụng ObjectKey và truyền đối tượng student của widget vào
  title: Text(student.name),
);

Đối với những trường hợp đơn giản, bạn có thể sử dụng các loại Key khác như ValueKey hoặc GlobalKey. Tuy nhiên, khi bạn cần xác định widget dựa trên đối tượng thực tế và đảm bảo tính nhất quán khi thay đổi đối tượng, ObjectKey là một lựa chọn tốt.

VI. Tìm hiểu về Unique Key

UniqueKey được sử dụng khi chúng ta muốn tạo ra một key duy nhất cho một widget mà không liên quan đến bất kỳ đặc điểm hay thuộc tính nào của widget đó. UniqueKey được tạo ra ngẫu nhiên và đảm bảo là duy nhất trong cùng một cây widget. Đơn giãn hơn là khi chúng ta không biết chọn thuộc tính nào là duy nhất thì chúng ta dùng luôn unique key.

Thường chúng ta dùng khi có nhiều widget con có cùng type hoặc bạn muốn đảm bảo các widget con không giống các widget khác.

Về cách sử dụng thì nó cũng tương tự value key, và object key nên mình không đề cập ở đây nữa.

1 Cách xây dựng Unique Key

Bước 1: Chúng ta khởi tạo unique key vào các widget item có trong danh sách như list view hoặc grid view chẳng hạn

List myWidgets = [
  Container(
    key: UniqueKey(),
    // các thuộc tính và nội dung của widget
  ),
  Container(
    key: UniqueKey(),
    // các thuộc tính và nội dung của widget
  ),
  // các widget khác...
];

⚠️ Cảm ơn các bạn đã đọc bài viết. Nếu thấy bài viết hữu ích thì các bạn đừng quên nhấn follow để ủng hộ mình và có thể đọc được các bài viết khác của mình trong tương lai 😄😄😄

Bài viết trước đó:

Hiểu về Null safety trong Flutter | by cometech | Dec, 2023 | Medium

Bài viết tiếp theo:

Xử lý đa luồng trong Flutter với isolate | by cometech | Dec, 2023 | Medium