将无限滚动添加到 GridView.builder 以 flutter FutureBuilder

问题描述

我很难在颤动中无限滚动。 我尝试先加载 10 个食谱，然后在 ScrollController 的帮助下显示新食谱。 当没有更多食谱时，我想显示一条消息，显示没有更多帖子。

这是我的项目代码。

import 'package:flutter/material.dart';
import 'package:test/model/recipe.dart';
import 'package:test/pages/recipe_details.dart';
import 'package:test/widgets/recipe_card.dart';
import 'package:http/http.dart' as http;

class SingleCategory extends StatefulWidget {
  final Recipe recipe;
  final int recipeCourseid;
  final String recipeCourseName;

  SingleCategory({
    this.recipe,@required this.recipeCourseid,@required this.recipeCourseName,});

  @override
  _SingleCategoryState createState() => _SingleCategoryState();
}

class _SingleCategoryState extends State<SingleCategory> {
  ScrollController _scrollController = ScrollController();
  int pageNumber = 1;

  var myRecipe;

  Future<List<Recipe>> getRecipeList({int pageNumber}) async {
    // pageNum = 1;
    var response = await http.get(
        'https://test.com/wp-json/wp/v2/wprm_recipe?wprm_course=${widget.recipeCourseid}&per_page=10&$pageNumber');
    var body = response.body;
    final recipes = recipeFromJson(body)

    return recipes;
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        pageNumber++;
        print(pageNumber);
        getRecipeList();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,child: Scaffold(
        appBar: AppBar(
          title: Text(widget.recipeCourseName),centerTitle: true,elevation: 5,),body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0,horizontal: 12.0),child: FutureBuilder(
            future: getRecipeList(),builder: (context,snapshot) {
              if (snapshot.hasData) {
                return GridView.builder(
                  controller: _scrollController,itemCount: snapshot.data.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,crossAxisSpacing: 12.0,mainAxisSpacing: 12.0,itemBuilder: (BuildContext context,int index) {
                    myRecipe = snapshot.data[index].recipe;
                    return InkWell(
                      onTap: () {
                        Navigator.push(
                          context,MaterialPageRoute(
                            builder: (context) => RecipeDetails(
                              recipe: snapshot.data[index],);
                      },child: RecipeCard(myRecipe: myRecipe),);
                  },);
              } else if (snapshot.hasError) {
                return Center(
                  child: Text('There was an error,Please try again'),);
              } else {
                return Center(
                  child: CircularProgressIndicator(),);
              }
            },);
  }
}

如果你能指出我正确的方向，我会很感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）