Phân biệt Stateful Widget và Stateless Widget trong Flutter?

Trong Flutter, widgets là các thành phần cơ bản dùng để xây dựng giao diện người dùng. Có hai loại widget chính: Stateful Widget và Stateless Widget. Mỗi loại có cách thức hoạt động và sử dụng riêng. Dưới đây là phân biệt chi tiết giữa chúng.

Stateless Widget

Stateless Widget là loại widget không có trạng thái (state) thay đổi trong suốt vòng đời của nó. Nghĩa là, khi widget này được xây dựng, nó sẽ không thay đổi giá trị của mình, trừ khi nó được xây dựng lại bởi một widget cha. Stateless Widget thường được sử dụng cho các giao diện tĩnh mà không cần thay đổi theo thời gian hoặc tương tác của người dùng.

Cách sử dụng: Để sử dụng Stateless Widget, bạn cần kế thừa từ lớp StatelessWidget và ghi đè phương thức build để định nghĩa giao diện của widget.

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'This is a Stateless Widget',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

Stateful Widget

Stateful Widget là loại widget có trạng thái có thể thay đổi trong suốt vòng đời của nó. Điều này có nghĩa là widget có thể cập nhật và thay đổi giao diện của mình dựa trên tương tác của người dùng hoặc các sự kiện bên ngoài. Khi trạng thái thay đổi, widget sẽ được xây dựng lại để phản ánh sự thay đổi đó.

Cách sử dụng: Để sử dụng Stateful Widget, bạn cần kế thừa từ lớp StatefulWidget và ghi đè phương thức createState để trả về một đối tượng State mà sẽ quản lý trạng thái của widget.

import 'package:flutter/material.dart';

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Button pressed $_counter times',
              style: TextStyle(color: Colors.white),
            ),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

So sánh chi tiết

• Trạng thái (State):
  • Stateless Widget: Không có trạng thái, không thay đổi.
  • Stateful Widget: Có trạng thái, có thể thay đổi trong thời gian chạy.
• Cách sử dụng:
  • Stateless Widget: Dùng cho các giao diện tĩnh, chỉ cần xây dựng một lần.
  • Stateful Widget: Dùng cho các giao diện động, cần cập nhật khi có sự thay đổi.
• Hiệu suất:
  • Stateless Widget: Thường nhẹ hơn vì không cần quản lý trạng thái.
  • Stateful Widget: Nặng hơn một chút do cần quản lý trạng thái và có thể gây ra việc xây dựng lại widget nhiều lần.

Kết luận

Việc chọn giữa Stateless và Stateful Widget phụ thuộc vào yêu cầu cụ thể của giao diện mà bạn đang xây dựng. Nếu bạn cần một widget tĩnh mà không thay đổi, hãy sử dụng Stateless Widget. Ngược lại, nếu bạn cần một widget có thể thay đổi trạng thái, hãy chọn Stateful Widget. Hiểu rõ sự khác biệt giữa chúng sẽ giúp bạn xây dựng ứng dụng Flutter hiệu quả hơn.