GitLocker: The Coding Marketplace

Description:

network to file image

network_to_file_image #
This package combines NetworkImage and FileImage to:

Download the image once from the URL,
Save it to the local file system,
Use the saved image from the file system from then on.

In more detail: #
Given a file and url of an image, it first tries to read it from the local file. It decodes the
given File object as an image, associating it with the given scale.
However, if the image doesn't yet exist as a local file, it fetches the given URL from the network,
associating it with the given scale, and then saves it to the local file. The image will be cached
regardless of cache headers from the server.
Notes: #

If the provided url is null or empty, NetworkToFileImage will default to FileImage. It will
read the image from the local file, and won't try to download it from the network.

If the provided file is null, NetworkToFileImage will default to NetworkImage. It will
download the image from the network, and won't save it locally.

Use the package #
Import path_provider in your pubspec.yaml file:
path_provider: ^2.1.1
copied to clipboard
Then use it to create a File from a file name:
Future<File> file(String filename) async {
Directory dir = await getApplicationDocumentsDirectory();
String pathName = p.join(dir.path, filename);
return File(pathName);
}

var myFile = await file("myFileName.png"),
copied to clipboard
Then, create the image:
Image(image:
NetworkToFileImage(
url: "https://example.com/someFile.png",
file: myFile,
)
)
copied to clipboard
If you make debug: true it prints to the console whether the image was read from the file or
fetched from the network:
Image(image:
NetworkToFileImage(
url: "https://example.com/someFile.png",
file: myFile,
debug: true,
)
)
copied to clipboard
Try running
the
NetworkToFileImage example.
Important: #
The directory where you want to save the image must already exist in the local disk. Otherwise, the
image won't be saved.
Canvas #
You can also load images to use with the Canvas object of the paint method of a CustomPainter.
ImageProviders can't be used directly with the Canvas object, but you can use the
provided ImageForCanvas class.
For example: Suppose a User object that contains url and filename properties:
var imageForCanvas = ImageForCanvas<User>(
imageProviderSupplier: (User user) => NetworkToFileImage(file: user.file, url: user.url),
keySupplier: (User user) => user.filename,
loadCallback: (image, obj, key) => setState((){}),
);

// While the image is downloading, this will return null.
var myImage = imageForCanvas.image(user);

if (myImage != null) {
canvas.drawImage(myImage, ...);
}
copied to clipboard
It will use the regular image cache from Flutter, and works not only with NetworkToFileImage
provider, but any other image providers.
Try running
the
ImageForCanvas example.
Tests #
You can set mock files (local and in the network). Please see methods:

setMockFile(File file, Uint8List bytes)
setMockUrl(String url, Uint8List bytes)
clearMocks()
clearMockFiles()
clearMockUrls()

Your mocked urls are usually only seen by the NetworkToFileImage class. However, you may override
the default Dart http methods so that these urls are visible to other ImageProviders.
To that end, simply call this method:
NetworkToFileImage.startHttpOverride();
copied to clipboard
You can stop the http override by calling:
NetworkToFileImage.stopHttpOverride();
copied to clipboard

Special thanks: Hugo Passos helped with the http
override.
The Flutter packages I've authored:

async_redux
fast_immutable_collections
provider_for_redux
i18n_extension
align_positioned
network_to_file_image
image_pixels
matrix4_transform
back_button_interceptor
indexed_list_view
animated_size_and_fade
assorted_layout_widgets
weak_map
themed
bdd_framework

My Medium Articles:

Async Redux: Flutter’s non-boilerplate version of Redux (
versions:
Português)

i18n_extension (
versions:
Português)

Flutter: The Advanced Layout Rule Even Beginners Must Know (
versions: русский)

The New Way to create Themes in your Flutter App

My article in the official Flutter documentation:

Understanding constraints

Marcelo Glasberg:
https://github.com/marcglasberg
https://linkedin.com/in/marcglasberg/
https://twitter.com/glasbergmarcelo
https://stackoverflow.com/users/3411681/marcg
https://medium.com/@marcglasberg