Home > database >  Flutter how to load api data when scroll down
Flutter how to load api data when scroll down

Time:02-10

here is my app fetch data from API at once and display them on listview, I want to display 10 items and when the client scroll down I want to display the rest, also 10 items till the length of the api data please any help

Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          endDrawer: NavigationDrawerWidget(),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            backgroundColor: Colors.black,
            title: Text("      الصبر   "),
            centerTitle: true,
          ),
          backgroundColor: Colors.grey[900],
          body: FutureBuilder(
              future: getData(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                List snap = snapshot.data;

                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                if (snapshot.hasError) {
                  return Center(
                    child: Text("error"),
                  );
                }
                return ListView.separated(
                  itemCount: snap.length,
                  separatorBuilder: (context, index) {
                    final data = snap[index];
                    final dataJoke = data["joke"];
                    final dataAnswer = data["answer"];

                    return Card(
                      elevation: 6,
             

     margin: EdgeInsets.symmetric(vertical: 3, horizontal: 6),
                  child: Container(
                    color: Colors.grey[600],
                    child: ListTile(
                      title: Text(
                        " ${snap[index]['joke']}",
                        textDirection: TextDirection.rtl,
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),

CodePudding user response:

search

infinite scroll flutter

CodePudding user response:

You can use a package to achieve this feature, which is called infinite_scroll_pagination: https://pub.dev/packages/infinite_scroll_pagination

There's example code in the package README

CodePudding user response:

  1. pull_to_refresh 2.0.0 use this package

  2. link :https://pub.dev/packages/pull_to_refresh

  • Related