title: Image.file items for a ListView or GridView disappear when scrolling back and forth
body: <p>I'm trying to populate a ListView with Image.file widgets using Image Picker.</p>
  <p><a href="https://i.stack.imgur.com/68z4C.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/68z4C.gif" alt="enter image description here" /></a></p>
  <p>I tried setting cacheExtent to 9999. but it doesn't make a difference, this behavior doesn't occur in CachedNetworkImage, but sadly this is a file image so is there a way to replicate said behavior?</p>
  <p>Sample Code:</p>
  <pre><code>GridView.builder(
          cacheExtent: 9999,
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          scrollDirection: Axis.horizontal,
          itemCount: images.length,
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            mainAxisSpacing: 10.0,
          ),
          itemBuilder: (BuildContext context, int index) {
            final image = images[index];
            return LayoutBuilder(builder: (context, constraints) {
              print(constraints);
              return (image != null)
                  ? ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Image.file(
                        File(image.path),
                        fit: BoxFit.cover,
                        cacheWidth: constraints.biggest.width.ceil(),
                        cacheHeight: constraints.biggest.height.ceil(),
                      ),
                    )
                : const SizedBox.shrink();
          },
        ),
  </code></pre>
  <p>When i use cacheWidth and cacheHeight it makes the loaded images pixelated and they never load in full quality
  <a href="https://i.stack.imgur.com/cbd9u.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cbd9u.jpg" alt="enter image description here" /></a></p>
  <p><strong>EDIT:</strong> it turned out to be because the loaded files were larger than needed, even though i used ImagePicker to compress their quality to 25%</p>
  <p>As <a href="https://stackoverflow.com/users/2252830/pskink">@pskink</a> instructed, i set the cacheWidth property to the following:</p>
  <pre><code>cacheWidth: constraints.biggest.width.ceil() * MediaQueryData.devicePixelRatio
           
  </code></pre>