How to render multiple widgets in flutter according to data from a list?

Question

I'm new to flutter. I have to render widgets according to an API response, which is JSON in a list. This is one of the custom widgets I have written for it. I have one for every row.

Widget testwidget2() {
      return FutureBuilder<List<inspectionOrder>>(
        future: createIO_Service.viewinspection_Service(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<inspectionOrder> data = snapshot.data;
            return ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return Container(
                    height: 50,
                    child: Center(child: Text(data[index].RoomType)),
                  );
                });
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return CircularProgressIndicator();
        },
      );
    }

I use a series of rows inside a listview to render these widgets.

ListView(
          // decoration: BoxDecoration(
          // border: Border.all(color: Colors.blueAccent,width: 5)),
         padding: const EdgeInsets.all(15.0),
         children: <Widget>[
       Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           mainAxisSize: MainAxisSize.max,
           crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
         Expanded( child: workordertile()),

But the problem is the whole data is rendered in one go (See Picture 1). But I want it to be rendered as shown in the second picture. The application in the second picture is written ionic, of which I have no idea at all. Picture 1 Picture 2

Answer 1

you should use "lazyloading(pagination,etc)" you can use this package:https://pub.dev/packages/pagination