Cách sử dụng FutureProvider trong Riverpod

Cách sử dụng FutureProvider trong Riverpod

FutureProvider trong Riverpod được sử dụng để quản lý các giá trị bất đồng bộ, như kết quả của các API calls hoặc bất kỳ hoạt động nào mà bạn cần chờ đợi kết quả. Nó giúp bạn làm việc với trạng thái bất đồng bộ một cách dễ dàng hơn bằng cách tự động quản lý các trạng thái như ‘loading’, ‘error’, và ‘data’.

1. Tạo FutureProvider

Trước tiên, bạn cần định nghĩa FutureProvider với một hàm Future mà nó sẽ thực hiện:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final userProvider = FutureProvider<User>((ref) async {
  // Giả sử có một hàm fetchUser để lấy thông tin người dùng từ server
  return await fetchUser();
});

// Giả định chúng ta có một hàm fetchUser như sau:
Future<User> fetchUser() async {
  await Future.delayed(Duration(seconds: 2)); // Giả lập delay
  return User('John Doe');
}

class User {
  final String name;
  User(this.name);
}
Dart

2. Sử dụng FutureProvider trong UI

Bạn sẽ sử dụng Consumer hoặc ConsumerWidget để lắng nghe trạng thái của FutureProvider. FutureProvider sẽ cung cấp 3 trạng thái chính: loading, error, và data.

class UserPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final userAsyncValue = watch(userProvider);

    return Scaffold(
      appBar: AppBar(title: Text('User Information')),
      body: userAsyncValue.when(
        data: (user) => Center(child: Text('User name: ${user.name}')),
        loading: () => Center(child: CircularProgressIndicator()),
        error: (error, stack) => Center(child: Text('Error: $error')),
      ),
    );
  }
}
Dart

Giải thích:

  • data: Được gọi khi dữ liệu đã được lấy thành công từ Future.
  • loading: Được gọi khi Future đang chạy và chưa có kết quả.
  • error: Được gọi nếu có lỗi xảy ra trong quá trình thực hiện Future.

Sử dụng ref.watch vs ref.read

  • watch: Sử dụng watch để lắng nghe các thay đổi trong trạng thái của provider. Khi trạng thái thay đổi, widget sẽ được rebuild.
  • read: Sử dụng read khi bạn chỉ muốn truy cập giá trị hiện tại mà không cần widget của bạn rebuild khi giá trị thay đổi. Thường được sử dụng trong các hàm như onPressed của button.

3. Lưu ý:

  • Quản lý trạng thái: FutureProvider tự động quản lý các trạng thái khác nhau, giúp bạn không phải lo về việc hiển thị loading indicator hay xử lý lỗi.
  • Cập nhật lại dữ liệu: Nếu bạn cần cập nhật lại dữ liệu, bạn có thể sử dụng ref.refresh(userProvider) hoặc ref.invalidate(userProvider) để buộc provider chạy lại Future.

FutureProvider là một công cụ rất hữu ích để làm việc với các tác vụ bất đồng bộ trong Flutter, đặc biệt là khi bạn muốn tự động quản lý các trạng thái khác nhau của dữ liệu.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *