Trong Android bạn có thể thực thi swipe refresh bằng cách wrap listview or girdview  trong một SwipeRefreshLayout,và iOS là UIRefreshController

Trong Flutter đó là RefreshIndicator

Mở Đầu

Khi child view trong RefreshIndicator over scrolled. Một animation circular indicator sẽ được hiển thị và hàm onRefresh callback sẽ được gọi và trả về một future. Sau khi UI được cập nhập thì indicator đó sẽ được ẩn đi.

Trong ví dụ này chúng ta sẽ làm một demo thêm item view khi người dùng scroll hết mức lên trên.

Những điều cần chú ý đối với RefreshIndicator là

  • RefreshIndicator yêu cầu key cho việc thực thi state
  • onRefresh(RefreshCallback) method yêu cầu completable future
  • child là ListView,Girdview hoặc CustomScrollView

Bạn thêm key cho RefreshIndicator như sau

final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
    new GlobalKey<RefreshIndicatorState>();

Chúng ta có body của widget bên dưới

body: RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _refresh,
        child: new Stack(
          children: <Widget>[
            _buildSuggestions(),
            _loader(),
          ],
        ),
      ),

_refresh() method là phương thức sẽ gọi getNewData() cho demo. Nó sẽ trả về một mảng list item trong Future. Khi List item được trả về bởi getNewData(). mảng data của chúng sẽ được update và setState để rebuild lại widget.

Future<Null> _refresh() {
    return getNewData().then((arr) {
      setState(() {
        _all.insertAll(0, arr);
      });
    });
  }

 

Có một điều chú ý ở đây là chúng ta có thể tạo data load tự động ngay trong initState khi widget được build

@override
void initState() {
  super.initState();
  WidgetsBinding.instance
      .addPostFrameCallback((_) => _refreshIndicatorKey.currentState.show());
}

 

Hoặc nếu bạn muốn add a refresh button tới toolbar , với hành động giống như swipe.

actions: <Widget>[
  new IconButton(
      icon: const Icon(Icons.refresh),
      tooltip: 'Refresh',
      onPressed: () {
        _refreshIndicatorKey.currentState.show();
      }),
],

Kết quả:

Kết Bài

Như vậy mình đã giới thiệu với các bạn loạt bài viết về gird view từ cơ bản. Đến những phần nâng cao như load more và pull refresh. Bạn có thể down source demo hoàn chỉnh tại đây

Nếu có bất cứ vấn đề gì thắc mắc các bạn có thể comment bên dưới bài viết. Mình sẽ phản hồi sớm nhất cho thể.

LEAVE A REPLY

Please enter your comment!
Please enter your name here