StatelessWidget, StatefulWidget và một số UI cơ bản trong Flutter

Flutter là một framework phát triển ứng dụng đa nền tảng do Google phát triển, cho phép bạn viết một lần và chạy được trên Android, iOS, Web và Desktop. Flutter sử dụng ngôn ngữ Dart, nổi bật với khả năng xây dựng giao diện UI một cách nhanh chóng, linh hoạt và đẹp mắt.

Một trong những khái niệm đầu tiên bạn cần nắm khi học Flutter là StatelessWidget và StatefulWidget. Đây là hai kiểu widget nền tảng mà bạn sẽ làm việc với gần như mọi lúc khi xây dựng UI.

Stateless và Stateful

Flutter coi mọi thành phần trên màn hình là widget – từ một nút bấm, một dòng chữ, đến toàn bộ giao diện ứng dụng. Tuy nhiên, không phải widget nào cũng giống nhau.

StatelessWidget là loại widget không thay đổi theo thời gian. Một khi được dựng lên, nó giữ nguyên trạng thái và không cập nhật lại. Ví dụ điển hình là một biểu tượng tĩnh hoặc dòng chữ không thay đổi.

StatefulWidget là widget có thể thay đổi giao diện trong quá trình sử dụng, thông qua việc cập nhật trạng thái (state). Ví dụ: một công tắc bật/tắt, nút bấm thay đổi màu khi được nhấn, bộ đếm số lần bấm.

Hiểu rõ sự khác nhau giữa hai loại widget này sẽ giúp bạn biết nên sử dụng cái nào trong từng tình huống cụ thể, từ đó tối ưu hiệu suất và đơn giản hóa logic xử lý.

Cách tạo một StatefulWidget

Khi bạn cần một widget phản hồi lại hành động của người dùng hoặc thay đổi khi dữ liệu thay đổi, bạn sẽ cần một StatefulWidget. Cú pháp bao gồm hai phần: phần widget chính và phần State quản lý trạng thái.

class MyWidget extends StatefulWidget {

@override State<MyWidget> createState() => _MyWidgetState();

}

class _MyWidgetState extends State<MyWidget>

{ @override Widget build(BuildContext context) {

return Container(); // UI chính

     }

}

Bên trong lớp State, bạn có thể khai báo các biến trạng thái và cập nhật chúng bằng cách gọi setState() mỗi khi cần dựng lại giao diện.

Quản lý state

Trong Flutter, UI luôn phản ánh trực tiếp state. Vì vậy, việc quản lý state hiệu quả là một phần cốt lõi trong quá trình xây dựng ứng dụng.

Bạn có thể quản lý state theo nhiều cách, tùy vào độ phức tạp của ứng dụng. Trong bài học này, ta cùng tìm hiểu hai cách tiếp cận cơ bản và dễ áp dụng nhất: dùng setState ở cấp cha, và tạo widget custom tự quản lý.

Cách 1: Đẩy setState lên lớp cha

Ở phương pháp này, widget cha giữ toàn bộ state, còn widget con chỉ nhận dữ liệu và callback từ cha. Đây là cách làm rõ ràng và dễ kiểm soát khi app còn nhỏ hoặc khi bạn muốn thống nhất luồng dữ liệu.

Ví dụ:

class ParentWidget extends StatefulWidget { ... }

class _ParentWidgetState extends State<ParentWidget> {

int counter = 0;

void increment() {

setState(() {

counter++;

});

}

@override Widget build(BuildContext context) {

return ChildWidget(onPressed: increment, value: counter);

   }

}

Cách 2: Tạo một widget custom tự quản lý state

Khi bạn muốn đóng gói hoàn toàn một tính năng nhỏ vào một widget độc lập – ví dụ như một nút "Like", thanh kéo, hoặc form nhập liệu – thì bạn có thể tạo một StatefulWidget riêng để tự quản lý trạng thái của nó.

Ví dụ:

class LikeButton extends StatefulWidget { ... }

class _LikeButtonState extends State<LikeButton> {

bool isLiked = false;

void toggleLike() {

setState(() {

isLiked = !isLiked;

   });

}

@override

Widget build(BuildContext context) {

return IconButton(

icon: Icon(isLiked ? Icons.favorite : Icons.favorite_border),

onPressed: toggleLike,

);

     }

}

Cách làm này rất gọn và linh hoạt, đặc biệt là khi bạn muốn tái sử dụng widget ở nhiều nơi khác nhau mà không cần quan tâm đến trạng thái bên ngoài.

Lộ trình học Flutter từ cơ bản tới nâng cao tại CodeFresher

Nếu bạn đang nghiêm túc theo đuổi Flutter và muốn rút ngắn thời gian học, lộ trình học Flutter tại CodeFresher là một lựa chọn phù hợp. Lộ trình được thiết kế bài bản, theo chiều sâu, giúp bạn từng bước xây dựng kỹ năng:

• Làm chủ Dart và Flutter core (widget, layout, state)
• Quản lý state với Provider, Riverpod, Bloc
• Xây dựng ứng dụng hoàn chỉnh: đa màn hình, responsive, gọi API, xử lý sự kiện
• Kết nối backend, lưu trữ dữ liệu, thực hiện kiểm thử
• Deploy ứng dụng thực tế lên store

Lộ trình không chỉ giúp bạn làm được, mà còn giúp bạn hiểu sâu, sẵn sàng bước vào môi trường làm việc chuyên nghiệp hoặc phát triển sản phẩm riêng.

Flutter đang là công nghệ được ưa chuộng bởi sự nhanh chóng, hiệu quả và tính đa nền tảng. Học vững Flutter hôm nay, bạn sẽ có nhiều cơ hội hơn trong tương lai – cả trong nghề nghiệp lẫn sản phẩm cá nhân.

Đăng ký khóa học ngay tại: https://laptrinh-online.vn/course/lap-trinh-flutter-co-ban

Địa chỉ: Trung tâm CodeFresher – số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.
Hotline: Ms Nga – 0968089175 , Ms Diệu – 0332026803 (zalo / call)