Flutter中如何为GridView.builder实现分页？求代码示例

我已成功按类别获取到users数据，现在想要为其实现Pagination（分页）功能。此前尝试过Stack Overflow上的相关方案但未成功，恳请提供可行的实现代码。以下是我的相关代码：

获取用户的API

static String baseUrl = "http://newprotectco.com/hello/api/";

static Future<http.Response> getUsers(Map<String, dynamic> params) async {
    var uri = Uri.parse(baseUrl + "Users/index").replace(queryParameters: params ?? {});
    var response = await http.get(uri);
    return response;
  }

当前展示用户的GridView代码

class UsersCategoryPage extends StatefulWidget {
  List<Data> list=[];
   UsersCategoryPage(this.list,{Key? key}) : super(key: key);

  @override
  State<UsersCategoryPage> createState() => _UsersCategoryPageState();
}

class _UsersCategoryPageState extends State<UsersCategoryPage>
    with AutomaticKeepAliveClientMixin<UsersCategoryPage> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Expanded(
      child: Padding(
        padding: EdgeInsets.symmetric(
            horizontal: Dimensions.width10, vertical: Dimensions.height10),
        child: GridView.builder(
            itemCount: widget.list.length,
            shrinkWrap: true,
            physics: const BouncingScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: Dimensions.aspectRatio,
                crossAxisCount: 2,
                mainAxisSpacing: Dimensions.height15),
            itemBuilder: (context, index) => Padding(
                  padding: EdgeInsets.symmetric(horizontal: Dimensions.width5),
                  child: WorkersList(
                    usersDetail: widget.list[index],
                    press: () => pushNewScreen(context,
                        screen: ContactUser(usersDetail: widget.list[index])),
                  ),
                )),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

我尝试的分页代码更新

class _UsersCategoryPageState extends State<UsersCategoryPage> with AutomaticKeepAliveClientMixin<UsersCategoryPage> {
  int perTime = 10;
  int length = widget.list.length < perTime ? widget.list.length : perTime;
  bool loading = false;
  @override
  Widget build(BuildContext context) {

    super.build(context);
    return LazyLoadScrollView(
      onEndOfPage: () async{
       setState(() {
         loading = true;
       });
       await Future.delayed(const Duration(seconds: 2));
       (length + perTime) >= widget.list.length?setState(() {
         length = widget.list.length;
       }):setState(() {
         length = length + perTime;
       });
      },
      child: Expanded(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: Dimensions.width10, vertical: Dimensions.height10),
          child: GridView.builder(
              itemCount: length >= widget.list.length?widget.list.length:loading? length + 1: length,
              shrinkWrap: true,
              physics: const BouncingScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: Dimensions.aspectRatio, crossAxisCount: 2, mainAxisSpacing: Dimensions.height15),
              itemBuilder: (context, index) => length >= widget.list.length ? index == widget.list.length
                  ? Center(
                child: CircularProgressIndicator(),
              ) :Padding(
                    padding: EdgeInsets.symmetric(horizontal: Dimensions.width5),
                    child: WorkersList(
                      usersDetail: widget.list[index],
                      press: () => pushNewScreen(context, screen: ContactUser(usersDetail: widget.list[index])),
                    ),
                  )),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

内容的提问来源于stack exchange，提问作者user12790690