Phân biệt StatelessWidget và StatefulWidget?

Trong thế giới phát triển ứng dụng di động, Flutter nổi bật với khả năng xây dựng giao diện người dùng đẹp mắt và hiệu quả. Hai loại widget cơ bản mà Flutter cung cấp là StatelessWidget và StatefulWidget, mỗi loại có những đặc điểm và ứng dụng riêng biệt. StatelessWidget đại diện cho những thành phần giao diện không có trạng thái, luôn hiển thị nội dung tĩnh, trong khi StatefulWidget cho phép xây dựng các thành phần có thể thay đổi trạng thái, cập nhật giao diện theo tương tác của người dùng. Bài viết này sẽ đi sâu vào từng loại widget, so sánh chúng và cung cấp các ví dụ thực tiễn, giúp bạn hiểu rõ hơn về cách sử dụng hiệu quả hai loại widget này trong Flutter.

Để hiểu rõ hơn về sự khác biệt giữa StatelessWidget và StatefulWidget trong Flutter, chúng ta sẽ đi sâu vào từng loại widget, cách sử dụng của chúng, và cung cấp ví dụ cụ thể.

StatelessWidget

StatelessWidget là loại widget trong Flutter mà không có trạng thái thay đổi. Điều này có nghĩa là khi một StatelessWidget được tạo ra, nó sẽ không bao giờ thay đổi nội dung của nó trừ khi widget cha của nó xây dựng lại nó.

Sử dụng StatelessWidget

Bạn nên sử dụng StatelessWidget trong các trường hợp như:

• Khi bạn cần tạo giao diện mà không có bất kỳ tương tác nào từ người dùng dẫn đến thay đổi trạng thái.
• Khi bạn muốn hiển thị một phần thông tin tĩnh, như văn bản, hình ảnh hoặc biểu tượng.

Ví dụ về StatelessWidget

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

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Widget Example'),
      ),
      body: Center(
        child: Text(
          'Hello, Stateless Widget!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Trong ví dụ trên, MyStatelessWidget không có trạng thái có thể thay đổi. Mọi thứ sẽ được xây dựng lại khi widget được gọi lại, nhưng nội dung của nó sẽ luôn như nhau.

StatefulWidget

Ngược lại, StatefulWidget là loại widget có thể thay đổi trạng thái. Điều này có nghĩa là khi trạng thái của widget thay đổi, nó có thể tự động cập nhật giao diện mà không cần phải xây dựng lại từ đầu.

Sử dụng StatefulWidget

StatefulWidget nên được sử dụng trong các trường hợp như:

• Khi bạn cần theo dõi và cập nhật trạng thái của widget, chẳng hạn như khi người dùng nhấn nút, nhập văn bản hoặc thay đổi lựa chọn.
• Khi bạn cần cập nhật một phần giao diện mà không cần phải làm mới toàn bộ widget.

Ví dụ về StatefulWidget

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

import 'package:flutter/material.dart';

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

class _MyStatefulWidgetState extends State {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Trong ví dụ này, MyStatefulWidget có một biến _counter để theo dõi số lần người dùng đã nhấn nút. Khi nút được nhấn, hàm _incrementCounter được gọi, và setState() được sử dụng để cập nhật giá trị của _counter. Khi giá trị này thay đổi, build sẽ được gọi lại và giao diện sẽ được cập nhật với số lần nhấn.

Tóm tắt

1. StatelessWidget: Không có trạng thái thay đổi, được sử dụng cho các phần giao diện tĩnh. Gọi lại widget không thay đổi nội dung.
2. StatefulWidget: Có trạng thái có thể thay đổi, cho phép cập nhật giao diện khi có sự thay đổi trạng thái. Cần sử dụng setState() để thông báo cho Flutter biết rằng có sự thay đổi trạng thái cần cập nhật.