Trang chủ » Blog » P2 – Tìm hiểu về StatefulWidget và StatelessWidget trong Flutter

P2 – Tìm hiểu về StatefulWidget và StatelessWidget trong Flutter

bởi CodeGym | 06/12/2023 17:30 | Blog

Như đã nói ở phần trước thì trong Flutter thì mọi thứ đều là Widget. Chúng ta quan tâm đến StatefulWidget và StatelessWidget. Khi tạo mới một StatefulWidget, có 2 cái cần quan tâm là StatefulWidget và State của Widget đó.

StatefulWidget

StatefulWidget là phần không thay đổi trong Widget Tree, thay vào đó, State là phần được thay đổi.

Chúng ta hãy xem vòng đời của một StatefulWidget:

StatefulWidget và StatelessWidget

Vòng đời của một StatefulWidget.

Khi thực hiện click icon bên góc dưới thì giá trị của biến counter được tăng lên 1, khi có sự thay đổi chúng ta tiến hành setState lại counter.

Ok giờ chúng ta thử tắt setState xem điều gì xẽ xảy ra, sử dụng mode debug để kiểm tra counter.

StatefulWidget và StatelessWidget

Chúng ta để ý thấy biến counter vẫn tăng lên khi chúng ta click vào icon tuy nhiên nó sẽ không được cập nhật lên screen.

Vì vậy khi có sự thay đổi về state các bạn nhớ sử dụng useState để tiến hành cập nhật nhé.

StatelessWidget 

StatelessWidget không có state. Nó không chấp nhận sự thay đổi bên trong nó. Còn đối với sự thay đổi từ bên ngoài (widget cha) thì nó sẽ thụ động thay đổi theo. Vậy nên, nó không có liên quan gì đến State cả.

Vòng đời của StatelessWidget:

StatefulWidget và StatelessWidget

Vòng đời của một StatelessWidget

Ví dụ:

Như vậy là chúng ta đã tìm hiểu về Stateless & Stateful Widgets.

Hẹn gặp các bạn ở phần tiếp theo cùng tìm hiểu cách hiển thị message với ListView.

Thanks!

Author: Lê Quốc Khánh

Xem thêm các bài viết chia sẻ, hướng dẫn học lập trình tại đây.

Đăng ký nhận bộ tài liệu kỹ năng dành cho lập trình viên (video hướng dẫn + slide) tại đây

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

10 + 6 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM