statefulwidget và statelesswidget là gì? Cùng nhau tìm hiểu về 2 widget này nhé!

Flutter là một SDK (Software Development Kit) mã nguồn mở được phát triển bởi Google, cho phép lập trình viên xây dựng ứng dụng di động đa nền tảng từ một nguồn code duy nhất. Flutter sử dụng ngôn ngữ lập trình Dart, một ngôn ngữ đơn giản và dễ hiểu. Điều này giúp việc phát triển ứng dụng trở nên nhanh chóng và dễ dàng hơn.

Trong Flutter, Widget là các thành phần cơ bản để xây dựng giao diện người dùng. Widget có thể là các thành phần đơn giản như Text, Button, Image hoặc các thành phần phức tạp hơn như Container, ListView, và AppBar. Widget trong Flutter rất linh hoạt và các widget này có thể được kết hợp lại để tạo ra giao diện người dùng phức tạp và tương tác.

Stateful Widget là gì?

Stateful Widget là một widget có thể thay đổi trạng thái. Trạng thái của một widget là dữ liệu có thể thay đổi theo thời gian. Ví dụ, một stateful widget có thể có một trạng thái cho màu sắc của nó, hoặc một trạng thái cho số lượng mục mà nó hiển thị.

Khi trạng thái của một stateful widget thay đổi, Flutter sẽ gọi lại hàm build() của widget đó để tạo lại widget. Điều này cho phép widget hiển thị dữ liệu mới trong trạng thái của nó.

Stateful Widget thường được sử dụng để tạo các widget có UI động, chẳng hạn như:

• Các widget phản hồi với đầu vào của người dùng, chẳng hạn như một button hoặc một textfield.
• Các widget hiển thị dữ liệu thay đổi theo thời gian, chẳng hạn như một ứng dụng thời tiết hoặc một ứng dụng tin tức.

Stateful Widget có hai thành phần chính:

• StatefulWidget: Đây là lớp cơ bản của tất cả các stateful widget. Lớp này cung cấp các phương thức cần thiết để quản lý trạng thái của widget.
• State: Đây là một lớp con của StatefulWidget. Lớp này chứa trạng thái thực tế của widget.

Để tạo một stateful widget, bạn cần tạo một lớp con của StatefulWidget. Lớp này cần định nghĩa hàm createState(), hàm này trả về một lớp con của State.

Lớp State chứa trạng thái thực tế của widget. Lớp này cần định nghĩa hàm build(), hàm này trả về widget mà widget stateful sẽ hiển thị.

Ví dụ sau đây tạo một stateful widget có trạng thái là màu sắc của nó:

class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Color color = Colors.red;

  void changeColor() {
    color = Colors.green;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Text("This is a stateful widget"),
    );
  }
}

Trong ví dụ này, lớp MyStatefulWidget có một trạng thái là màu sắc của nó. Lớp _MyStatefulWidgetState chứa hàm changeColor(), hàm này thay đổi màu sắc của widget. Khi màu sắc thay đổi, hàm setState() được gọi để thông báo cho Flutter rằng widget cần được tạo lại.

Khi người dùng nhấn vào nút “Change Color”, hàm changeColor() được gọi và màu sắc của widget sẽ thay đổi thành màu xanh lá cây. Flutter sau đó sẽ gọi lại hàm build() của widget để tạo lại widget với màu sắc mới.

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

• Để tạo một button có thể thay đổi màu sắc khi được nhấn, bạn có thể sử dụng một stateful widget với một trạng thái cho màu sắc của button. Khi button được nhấn, bạn có thể gọi hàm setState() để thay đổi màu sắc của button.
• Để tạo một textfield có thể thay đổi giá trị khi người dùng nhập văn bản, bạn có thể sử dụng một stateful widget với một trạng thái cho giá trị của textfield. Khi người dùng nhập văn bản, bạn có thể gọi hàm setState() để thay đổi giá trị của textfield.
• Để tạo một ứng dụng thời tiết hiển thị nhiệt độ hiện tại, bạn có thể sử dụng một stateful widget với một trạng thái cho nhiệt độ hiện tại. Bạn có thể cập nhật trạng thái này thường xuyên để widget hiển thị nhiệt độ mới nhất.

Stateful widget là một công cụ mạnh mẽ cho phép bạn tạo các widget có UI động.

Điều gì sẽ diễn ra khi ta thực hiện gọi setState() cho một StatefulWidget?

Khi bạn gọi setState() cho một StatefulWidget, nó sẽ kích hoạt một loạt các sự kiện trong vòng đời của widget. Các sự kiện này bao gồm:

• setState(): Điều này là rõ ràng.
• didUpdateWidget(): Sự kiện này được gọi sau khi trạng thái của widget được cập nhật. Bạn có thể sử dụng sự kiện này để thực hiện các thao tác cần thiết trước khi hàm build() được gọi lại.
• build(): Sự kiện này được gọi lại để tạo lại widget với trạng thái mới.

Ví dụ, nếu bạn có một StatefulWidget có trạng thái là màu sắc của nó, và bạn gọi setState() để thay đổi màu sắc, thì vòng đời của widget sẽ diễn ra như sau:

setState()
didUpdateWidget()
build()

Sự kiện didUpdateWidget() là một sự kiện tùy chọn. Bạn có thể bỏ qua sự kiện này nếu bạn không cần thực hiện bất kỳ thao tác nào trước khi hàm build() được gọi lại.

Để hiểu rõ hơn về cách các sự kiện trong vòng đời của StatefulWidget hoạt động, bạn có thể tham khảo tài liệu chính thức của Flutter về StatefulWidget: https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html.

Dưới đây là một số ví dụ về cách sử dụng các sự kiện trong vòng đời của StatefulWidget:

• Để cập nhật trạng thái của một widget dựa trên trạng thái của các widget khác, bạn có thể sử dụng sự kiện didUpdateWidget().
• Để thực hiện các hoạt động tốn kém trước khi hàm build() được gọi lại, bạn có thể sử dụng sự kiện didUpdateWidget().
• Để kiểm tra xem trạng thái của widget có thay đổi hay không, bạn có thể sử dụng sự kiện didUpdateWidget().

Tóm lại, khi bạn gọi setState() cho một StatefulWidget, nó sẽ kích hoạt một loạt các sự kiện trong vòng đời của widget. Các sự kiện này cho phép bạn thực hiện các thao tác cần thiết trước khi hàm build() được gọi lại để tạo lại widget với trạng thái mới.

Stateless Widget là gì?

Stateless Widget là một widget không có trạng thái. Điều này có nghĩa là trạng thái của widget không thể thay đổi sau khi widget được tạo. Stateless widget thường được sử dụng để hiển thị dữ liệu tĩnh, chẳng hạn như văn bản, hình ảnh hoặc biểu tượng.

Stateless widget có một hàm build() duy nhất, hàm này trả về widget mà widget stateless sẽ hiển thị. Khi widget stateless được tạo, hàm build() sẽ được gọi một lần duy nhất để tạo widget.

Như vậy chúng ta có thể nhận ra điểm khác biệt lớn nhất giữa giữa Stateless và Stateful là Stateless sẽ không có state đồng nghĩa với việc chúng ta không thể thay đổi dữ liệu của Stateless widget theo cách thông thường.

Ví dụ sau đây tạo một stateless widget hiển thị văn bản:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("This is a stateless widget");
  }
}

Trong ví dụ này, hàm build() trả về một widget Text với văn bản “This is a stateless widget”.

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

• Để hiển thị văn bản, bạn có thể sử dụng một stateless widget với một hàm build() trả về một widget Text.
• Để hiển thị hình ảnh, bạn có thể sử dụng một stateless widget với một hàm build() trả về một widget Image.
• Để hiển thị biểu tượng, bạn có thể sử dụng một stateless widget với một hàm build() trả về một widget Icon.

Stateless widget là một công cụ đơn giản nhưng mạnh mẽ cho phép bạn tạo các widget có UI tĩnh.

Có thể thực hiện chức năng tương tự như setState của Stateful Widget cho Stateless Widget Không?

Câu trả lời là CÓ THỂ. Nhưng chúng ta phải sử dụng nó thông qua một cách đặt biệt là StatefulBuilder

StatefulBuilder là một widget cho phép bạn tạo một widget có thể thay đổi trạng thái của nó. StatefulBuilder có thể được sử dụng để xây dựng các widget phức tạp hơn, chẳng hạn như các widget có thể phản hồi với các thay đổi dữ liệu hoặc tương tác của người dùng.

StatefulBuilder hoạt động bằng cách sử dụng một lớp State để quản lý trạng thái của widget. Lớp State có thể được sử dụng để lưu trữ dữ liệu, xử lý các sự kiện và cập nhật trạng thái của widget.

Để sử dụng StatefulBuilder, bạn cần tạo một lớp widget kế thừa từ StatefulWidget. Lớp widget này phải có một lớp State đi kèm.

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

class MyStatefulBuilder extends StatefulWidget {
  final String text;

  MyStatefulBuilder({Key key, this.text}) : super(key: key);

  @override
  State<MyStatefulBuilder> createState() => _MyStatefulBuilderState();
}

class _MyStatefulBuilderState extends State<MyStatefulBuilder> {
  bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (context, setState) {
        return Container(
          child: Text(
            text,
            style: TextStyle(
              color: isPressed ? Colors.red : Colors.black,
            ),
          ),
          onPressed: () {
            setState(() {
              isPressed = !isPressed;
            });
          },
        );
      },
    );
  }
}

Như đoạn code trên bạn có thể thấy. Chúng ta có thể sử dụng StatefulBuilder để set lại state của widget. Nhưng có một điểm lưu ý quan trọng là StatefulBuilder chỉ có thể thay đổi state cho widget bên trong nó.

Khi nào nên sử dụng stateless widget?

Bạn nên sử dụng Stateless Widget khi:

• Dữ liệu của widget không cần thay đổi sau khi widget được tạo.
• Widget không cần phản hồi với đầu vào của người dùng.
• Widget cần được tạo nhanh chóng và hiệu quả.

Khi nào nên sử dụng stateful widget?

Bạn nên sử dụng Stateful Widget khi:

• Dữ liệu của widget cần thay đổi sau khi widget được tạo.
• Widget cần phản hồi với đầu vào của người dùng.
• Widget cần được tạo động theo thời gian.

Dưới đây là một số ví dụ cụ thể về cách sử dụng stateless widget và stateful widget:

• Stateless widget
  • Để hiển thị văn bản, bạn có thể sử dụng một stateless widget với một hàm build() trả về một widget Text.
  • Để hiển thị hình ảnh, bạn có thể sử dụng một stateless widget với một hàm build() trả về một widget Image.
  • Để hiển thị biểu tượng, bạn có thể sử dụng một stateless widget với một hàm build() trả về một widget Icon.
• Stateful widget
  • Để tạo một button có thể thay đổi màu sắc khi được nhấn, bạn có thể sử dụng một stateful widget với một trạng thái cho màu sắc của button. Khi button được nhấn, bạn có thể gọi hàm setState() để thay đổi màu sắc của button.
  • Để tạo một textfield có thể thay đổi giá trị khi người dùng nhập văn bản, bạn có thể sử dụng một stateful widget với một trạng thái cho giá trị của textfield. Khi người dùng nhập văn bản, bạn có thể gọi hàm setState() để thay đổi giá trị của textfield.
  • Để tạo một ứng dụng thời tiết hiển thị nhiệt độ hiện tại, bạn có thể sử dụng một stateful widget với một trạng thái cho nhiệt độ hiện tại. Bạn có thể cập nhật trạng thái này thường xuyên để widget hiển thị nhiệt độ mới nhất.

Như vậy là chúng ta đã tìm hiểu chi tiết về 2 widget quan trọng của flutter là Stateless widget và Stateful widget.

Ưu điểm của việc sử dụng Flutter để phát triển ứng dụng di động