Home > Software engineering >  How to make lazy loading with FutureBuilder in flutter
How to make lazy loading with FutureBuilder in flutter

Time:08-11

I searched in a lot of topics but couldn't find solution to my problem. I try to make lazy loading with FutureBuilder to listview. All topics I found the code different from what I have. I don't want to apply it from a package. Sorry about that but I'm still not a professional in flutter. Can someone help me.

thank you

My code:

class _HomePageState extends State<YourPost> {




  @override
  void initState() {
    super.initState();
  }


  Future ApiUserPost() async {

    final String url = '*************';
    var response = await http.post(Uri.parse(url));
    var responsebody = jsonDecode(response.body);

    if (responsebody.length > 0) {
      return responsebody;
    } else {

    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Container(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              FutureBuilder(
                  future: ApiUserPost(),
                  builder: (context, AsyncSnapshot snapshot) {
                    if (snapshot.hasData) {
                      return ListView.builder(
                          physics: ScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemCount: snapshot.data.length.clamp(0, 6),
                          itemBuilder: (context, index) {
                            return Card(
                              // elevation: 1,
                              child: Container(
                                padding: EdgeInsets.all(6),
                                child: Row(
                                  children: <Widget>[
                                    Flexible(
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: <Widget>[
                                          MergeSemantics(
                                            child: Row(
                                              children: <Widget>[
                                                Flexible(
                                                  child: Text(
                                                    "${snapshot.data[index]['name']}",
                                                  ),
                                                )
                                              ],
                                            ),
                                          ),
                                          SizedBox(height: 5),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            );
                          });
                    } else if (snapshot.hasError) {
                      Center(
                          child: CircularProgressIndicator(
                            valueColor:
                            new AlwaysStoppedAnimation<Color>(Colors.black),
                          ),);
                    }

                    return SizedBox(
                      height: MediaQuery.of(context).size.height / 1.3,
                      child: Center(
                        child: CircularProgressIndicator(
                          valueColor:
                              new AlwaysStoppedAnimation<Color>(Colors.black),
                        ),
                      ),
                    );
                  })
            ],
          ),
        ),
      ),
    ));
  }
}


CodePudding user response:

I think the main problem is that you're not indicating the generic types (Class)on some places. When you working with Futures and FutureBuilder you have to specify what type you're working with..

Future<TypeYouExpected> apiUserPost() async {
  //Try to specify the type of the variables too
}

The FutureBuilder widget also has to know that type..

  body: FutureBuilder<TypeYouExpected>(
    future: apiUserPost(),
    builder: ..
  • Related