I need some libraries!Let’s have a look at the pubspec.
yaml file and see what we’ve got.
pubspec.
yamlThe first library we need is http, which is the standard used to make http requests in dart.
Now we can request our file, but we don’t want to do a request per resource.
Instead, we can bundle all our resources in a zip file and use archive to extract all the resources and save them individually in the device storage.
Finally, we will use path_provider to retrieve the path for the internal storage for the application and save our data there.
We will later use it again to retrieve the resources (images) we need.
Where are the assets?We have two different sets of assets:for the “candy” theme, we will save the images in the /assets/images folder and later used with Image.
asset widgets.
for the “cocktails” theme, we will create a zip file and upload it to Firebase storage, which conveniently provides an url to download them.
After this is downloaded and the contents extracted, the images will be used with Image.
file widgets.
Understood, show me the codeLet’s see the whole thing and then review every part.
All these in 100 lines of code?State and basic UII created an enum AppTheme so define the two different states: candy and cocktails.
As I need to save the current theme I will use a StatefulWidget that will be rebuilt every time the user changes the theme.
In this first section, we set the initial state to “candy” and load the images as a List<String> to later iterate over them.
The UI is very simple, just a list of images and a floating button.
Once the button is pressed we check the current theme and download assets if we need to, and then update the state with the new theme and load the list of images names.
The list of images is already pre-set, but I can imagine this could also come in the zip file for every set of resources or as a JSON independently.
Sample of resources, this could/should be much largerFinally, List.
builder will iterate over the images and display them.
The method _getImage() will use the proper widget to decide how to load the image depending on the current theme.
Download and extract assetsBasically, I find out the path for the application storage directory with getApplicationDocumentsDirectory and store the value, as I will use it later.
If the assets have not already been download, I do it and extract the contents as individual files.
This is a very basic example, but we could refine this by adding different folders and even deleting the zip file after the contents have already been extracted.
To download the file we just use a regular http request call and store the data in the application directory as a file.
Load the imagesLoading the images is quite simple.
If the assets are part of the build we can use a regularImage.
asset widget.
In case they were downloaded and saved we can use Image.
file instead.
SummaryIt seems like a lot has been done but basically, we are downloading a zip file, extracting the contents and saving them in the storage as regular files.
This is a very simple case where I simplified a lot the problem.
We could add a more sophisticated cache system or some extra ui elements to let the user know that we are downloading new assets, but this serves to illustrate the problem and works nicely.
You can check the complete example in https://github.
com/davidanaya/flutter-themed-app.
Thanks for reading!.