Giới Thiệu Về Flutter Hooks

Flutter Hooks là một thư viện đáng chú ý, được xây dựng bởi tác giả Remi Rousselet, nổi bật với khả năng giúp bạn viết code Flutter một cách ngắn gọn và hiệu quả hơn. Dựa trên cảm hứng từ React, Hooks là một loại object mạnh mẽ giúp quản lý vòng đời (life-cycle) của Widget trong Flutter, đồng thời tăng cường khả năng chia sẻ và tái sử dụng mã nguồn.

Sự Cần Thiết Của Hooks

Bạn có thể đã biết rằng StatefulWidget trong Flutter có các phương thức như initState và dispose để quản lý vòng đời. Tuy nhiên, việc tái sử dụng mã trong những phương thức này không phải lúc nào cũng đơn giản. Hooks được sinh ra để giải quyết tình huống này, nhằm giảm thiểu mã lặp và cải thiện cấu trúc code.

Hướng Dẫn Sử Dụng Flutter Hooks

Dưới đây là một ví dụ đơn giản về cách sử dụng Flutter Hooks:

class MyHookWidget extends HookWidget {
  const MyHookWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      body: Center(
        child: Text('Counter: ${counter.value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Cách Hoạt Động

Trong ví dụ trên, Widget không còn kế thừa từ StatefulWidget hay StatelessWidget nữa, mà kế thừa từ HookWidget. Từ khóa useState trong phương thức build là một trong những hook của Flutter, cho phép bạn duy trì trạng thái (state) giữa các lần dựng lại widget.

Các Loại Hook Cơ Bản Trong Flutter

useEffect Hook

Giống như useEffect trong React, useEffect của Flutter được dùng để thực hiện các side effect trong quá trình render. Effect có thể trả về một hàm để dọn dẹp khi widget bị hủy (dispose).

useEffect(() {
  performSideEffect();
  return () {
    cleanUp();
  };
}, [key]);

useState Hook

Hook cơ bản nhất, cho phép bạn chuyển đổi từ StatelessWidget sang StatefulWidget. Duy trì trạng thái giữa các lần rebuild widget:

final counter = useState(0);

useMemoized Hook

Giúp bạn tạo một object phức tạp và duy trì nó qua nhiều lần rebuild widget:

final complexObject = useMemoized(
  () => createComplexObject(),
  []
);

useRef Hook

Tạo một object chứa thuộc tính có thể thay đổi mà không mất hiệu lực khi widget rebuild:

final textController = useTextEditingController();
final name = useRef('');

useCallback Hook

Cache một instance của một hàm nếu hàm đó được gọi lại:

final cachedFun = useCallback(() {
  Statements
}, []);

useContext Hook

Giúp giữ BuildContext của HookWidget, loại bỏ việc phải truyền context qua các phương thức.

useValueChanged Hook

Theo dõi giá trị và kích hoạt callback khi giá trị thay đổi:

useValueChanged(count.value, (oldValue, oldResult) {
  print('oldValue = $oldValue, oldResult = $oldResult');
});

useStream Hook

Giúp subscribe một Stream:

final snapshot = useStream(backend.stream);

useAnimationController Hook

Tạo một AnimationController và tự động dispose:

final controller = useAnimationController(
  duration: Duration(seconds: 1)
);

Lợi Ích Của Flutter Hooks

1. Quản Lý Trạng Thái: Đơn giản hóa việc quản lý trạng thái cục bộ.
2. Giảm Mã Lặp: Khả năng tái sử dụng logic mà không cần viết lại.
3. Cải Thiện Hot Reload: Giảm lỗi khi hot reload.
4. Tiện Lợi: Các hook tích hợp sẵn cho nhiều use-case phổ biến.
5. Đơn Giản Hóa Vòng Đời: Giúp quản lý dễ dàng hơn các vòng đời phức tạp.
6. Linh Hoạt Với Custom Hooks: Cho phép tạo các hook tùy chỉnh theo nhu cầu.

Kết Luận

Flutter Hooks là một công cụ mạnh mẽ nhưng chưa được áp dụng rộng rãi trong các dự án. Bạn đã thử nghiệm với Flutter Hooks chưa? Chia sẻ ý kiến của bạn về ưu và nhược điểm của nó nhé!

🔔 Blog: henrytechie.com
☕️ Facebook: Henry Techie
☁️ TikTok: @henrytechie
source: viblo