ListView.builder、GridView.builder 的高效存储抓取

Question

In order to fetch data from the API with the builder function of ListView.builder or GridView.builder you have to create a list of Widgets that is being filled when you scroll.

The actual reason for using the Builder function is, to deal with large Lists so that only widgets are being rendered/build when needed:

List<Widget> _mediaList = [];
  int currentPage = 0;
  int? lastPage;

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

  _handleScrollEvent(ScrollNotification scroll) {
    if (scroll.metrics.pixels / scroll.metrics.maxScrollExtent > 0.33) {
      if (currentPage != lastPage) {
        _fetchNewMedia();
      }
    }
  }

  _fetchNewMedia() async {
    lastPage = currentPage;

    setState(() {
      _mediaList.add(
        Text("Some Widget"),
      );
      currentPage++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scroll) {
        _handleScrollEvent(scroll);
        return false;
      },
      child: GridView.builder(
          controller: widget.scrollCtr,
          itemCount: _mediaList.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return _mediaList[index];
          }),
    );
  }

The problem that I see is, that if you have an endless list (like a Post feed), that the list would store every Data source and the list would eventually jam up the RAM.

I would imagine that you either have to clear the list after scrolling for a long time or you would need to only store String-IDs and load the data according to them.

Is that concern appropriate or does the builder also optimize the storage in that case?

Answer 1

You should store String-IDs and build the list items using FutureBuilder() . Because although ListView.builder() renders only those items which are visible on the device screen but in case of post feed the post data may consume so much storage which can cause efficiency problem.