How can I clear the image cache after my user scroll down the screen, and reload if it scroll up?

Important note, it is unlikely that simply having more images in your image cache will result in bad performance, especially if you are displaying them with a ListView.builder(). Check you are not running in debug mode, which severly hurts performance, and make sure you profile before trying to optimize performance.

That being said, if you know the the key for an image in Flutter's image cache, you can remove the image by calling

imageCache!.evict(key);

Different types of ImageProvider have different keys, but given that you are getting your images from the web, I'm assuming you're using NetworkImage (or Image.network which uses NetworkImage under the hood).

You could then create a Widget that wraps an Image, and evicts it from the cache once it is disposed. Perhaps something like this:

class DisposingNetworkImage extends StatefulWidget {
  final NetworkImage image;
  // boilerplate
}

class DisposingNetworkImageState extends State<DisposingNetworkImage> {
  @override
  void dispose() {
    imageCache!.evict(widget.image);
    super.dispose();
  }

  @override
  Widget build(BuildContext) => Image(
    image: widget.image,
  );
}

Then you can use this in your other widgets like:

DisposingNetworkImage(image: NetworkImage('https://example.com/my-image'))

You should try using CachedNetworkImage widget from cached_network_image plugin.

It takes cacheHeight and cacheWidth params. Don't forget to provide these values.

Ref: https://pub.dev/packages/cached_network_image.