Add pagination using wrap widget with a large amount of data - flutter

Question

I have a list of string List<String> which contains occupations and has about a thousand data in it, I display this data in a chip format using Wrap widget in flutter but now my app slows down whenever i want to display the large amount of data to the screen. So I read that i can use pagination to boost the performance by not displaying all the data at once but bit by bit, now my problem comes in. I need the wrap widget to display the data but i don't know how to implement a pagination to it unlike the ListView.builder that has an itemCount.

Wrap(
            alignment: WrapAlignment.center,
            runAlignment: WrapAlignment.center,
            crossAxisAlignment: WrapCrossAlignment.center,
            spacing: 15,
            runSpacing: 15,
            children: occupations.map((interest) {
              bool isSelected = selectedInterests.contains(interest);
              return InkWell(
                enableFeedback: true,
                onTap: () {
                  if (isSelected) {
                    setState(() {
                      selectedInterests.remove(interest);
                    });
                  } else {
                    if (selectedInterests.length < 8) {
                      setState(() {
                        selectedInterests.add(interest);
                      });
                    } else {
                      showToast(context, "You can only select 8 interests");
                    }
                  }
                },
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 10,
                        horizontal: 15,
                      ),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: isSelected
                              ? theme.primary
                              : theme.primary.withOpacity(0.04),
                          border: Border.all(width: 2, color: theme.primary),
                          boxShadow: const [
                            BoxShadow(
                              color: Color.fromRGBO(240, 245, 255, 0.56),
                              blurRadius: 10,
                              offset: Offset(0, 10),
                            )
                          ]),
                      child: CustomText(interest,
                          color: isSelected ? Colors.white : Colors.grey[800],
                          fontSize: 14,
                          fontWeight: FontWeight.w500),
                    ),
                  ],
                ),
              );
            }).toList(),
          )

How do i implement this while still maintaining the wrap functionality that the Wrap widget provides. Please if you don't understand something ask me to explain it.

Answer 1

you can slice your array into pieces with something like this

list mySlicedArrayData = [];
int range = 20;
int page = 1;
bool showMore = false;
setState(() {
  showMore = arrayData.length >= range;
  List slicedData = showMore ? arrayData.getRange(0, range) : arrayData;
  mySlicedArrayData.addAll(slicedData);
})
...
showMore
            ? ElevatedButton(
                onPressed: () {
                    setState(() {
                      page = page +1;
                      showMore = arrayData.length >= page * range;
  List slicedData = showMore ? arrayData.getRange(0, page * range) : arrayData;
mySlicedArrayData = [];
  mySlicedArrayData.addAll(slicedData);
                    });
                },
                child: const Text("load more"))
            : const SizedBox(),