Trong bài viết hôm nay mình sẽ giới thiệu với các bạn cách tạo một girdview có số lượng item vô hạn. Bạn có thể gặp trong các ứng dụng phổ biến như Facebook,Twitter … . Trong những trường hợp này bạn không thể lấy toàn bộ dữ liệu người dùng với một request duy nhất được mà sẽ phải chia nhỏ ra, mỗi request sẽ lấy một số lượng item nhất định và cứ thế tải thêm khi user scroll app xuống dưới.

Mở Đầu

Trong bài trước mình đã giới thiệu các bạn về gird view. Bạn có thể xem lại tại đây

Infinite scrollLoad more là hai khái niệm phổ biến trong các ứng dụng mobile. Khi bạn cần hiển thị dữ liệu lớn trong ứng dụng thì bắt buộc việc bạn cần phải làm là phân trang dữ liệu tải về và hiển thị.

Phân trang sẽ phân chia nhỏ dữ liệu vào tải về từng phần dữ liệu nhỏ. Bạn có thể thấy như Facebook,Twitter hay Instagram có thể dành hàng giờ scroll mà không có kết thúc

Cách triển khai cho Infinite scrollLoad more

  1.  Load more
    • Đối với load more chúng ta có thể thêm một button tới footer của view. khi ấn button thì ta sẽ tải thêm dữ liệu về
  2. Infinite scroll
    • Đối với Infinite scroll chúng ta sẽ kiểm tra nếu item cuối được hiển thị thì sẽ tải thêm dữ liệu về

Trong bài viết này mình khuyến khích các bạn dùng cách số 2 vì nó thân thiện với người dùng hơn

Triển khai

  1. Tạo một project mới
  2. File trong main.dart như bên dưới

 

3. Bạn tạo một file tên là home.dart. chúng ra sẽ viết user interface widget và logic cho phần load more ở đây. Bao gồm fetch data và load more event

4. Chúng ta kiểm tra item cuối cùng trong list bằng cách sử dụng ScrollController. Chúng ta tạo một instance của ScrollController và đăng kí một event listener. Tại đây chúng ta sẽ kiểm tra list item và gọi startLoader method nếu item cuối cùng được hiển thị

void _scrollListener() {
  if (controller.position.pixels == controller.position.maxScrollExtent) {
    startLoader();
  }
}

5. StartLoader sẽ bắt đầu hiển thị progress bar widget và gọi fetchData method

void startLoader() {
  setState(() {
    isLoading = !isLoading;
    fetchData();
  });
}

6. trong fetchData method, chúng ta sẽ set 2s delay cho demo thay việc gọi API request lên server. 2s sau chúng ta sẽ nhận được một onResponse method. Tại đây chúng ta sẽ update lại danh sách item

fetchData() async {
  var _duration = new Duration(seconds: 2);
  return new Timer(_duration, onResponse);
}
void onResponse() {
  var arr = <int>[];
  for(int i  = 0; i < 30 ;i++){
    arr.add(itemCount);
    itemCount += 1;
  }
  setState(() {
    isLoading = !isLoading;
    _all.addAll(arr);
  });
}

Cuối cùng ta có kết quả như sau

Kết bài:

Như vậy qua bài này mình đã giới thiệu với các bạn về hiển thị gird view có số lượng item vô hạn. Mỗi lần khi bạn scroll xuống thì nó lại fetch thêm dữ liệu mới về và hiển thị lên trên ứng dụng.

Source Demo:

Bạn có thể download tại đây

Trong bài viết tiếp theo mình sẽ hướng dẫn các bạn làm việc với gird view pull refresh để cập nhập item mới. Các bạn có thể xem tại đây

LEAVE A REPLY

Please enter your comment!
Please enter your name here