I'm creating a Flutter Web app and i'm trying to figure out a way to display all images in a directory. Here's an example tree.
images
- projects
- p1
- image1.jpg
- image2.JPEG
- image3.png
- p2
I can display every image individually with Image.Asset(images/projects/p1/image1.jpg) but some image files have different extensions or are in different subfolders. Since this is flutter web I don't have access to dart:io and cant use Directory() which includes packages like 'path_provider'. Possible solution would be to create a json manifest file with all folders/filenames but some folders can have up to 20-30 files and would require me to update the manifest everytime I add/replace/remove images. Any other ideas?
you can do something like this
assets:
- images/
- fonts/
this way all of the "Direct" child's will be added to the assets but sub-child's won't so if you can make a constant structure for your assets and add only the directories then you don't have to worry about the pubspec.yaml or running flutter pub get when files are added or removed .
Related
I had initially run flutter pubs get images an it'd get all images folders/files, but, on adding another image folder/files, The files are no longer getting it assets folder files except the previous ones which are still active.
I had all the indentation set correctly, which the previous folders/files were gotten correctly, on adding 3 extra images I got these errors:
Contains emphasized items,
Untracked.
\ uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/
- images/img-icons/
- images/side-bar/
- images/dashboard/
- images/meditation/
The images that are giving issues, they all have a .png extensions:
Note: I had ran flutter pub get more than 10 times!!!
What am I doing wrong?
I have an app with multiple flavours. Assets are flavour-specific, and I'm looking for a way to filter out the assets that don't apply for the current flavour. The current structure looks like
assets
flavour1
image.jpg
flavour2
image.jpg
In other words, how do I make sure that when I compile flavour1 the assets folder gets truncated down to
assets
flavour1
image.jpg
In Flutter Docs https://flutter.dev/docs/development/ui/assets-and-images we need to past our Images to folders 2.0x|3.0x etc.
As a example, we have:
...icons/stackoverflow.png,
...icons/2.0x/stackoverflow.png.
In my project, I have a list icons of all countries (255 icons) and when I export from figma, it came with a suffix. It's gonna be hard rename all icons.
Is there a way to change how Flutter read assets to accept suffix in the assets? In 2.0x folder, load assets with #2x suffix and in 3.0x load assets with #3x suffix.
Is there a way to programatically access the assets folder and loop over all its content?
I want to display all my assets for something like an emoji picker.
I tried searching the web for a solution but all the answers was for a single file from assets.
It was a restriction in the early stage of flutter i guess. But now you can add/read all assets.
In the pubspec.yaml file include the whole folder with /
flutter:
assets:
- assets/
official docs
Programatically you can acces, you should pass/use the asset's name dynamically in that case. There are lots of packages are available for emoji, I think that will be better to use one of them.
For accessing single file we can do by file include pubspec.yaml folder with /:
flutter:
assets:
- assets/res/my_file.txt
And For access all assets from asset folder :
flutter:
assets:
- assets/
Try this, Hope you get the answer!
the flutter compiler lists all files from these folders in the AssetManifest.json file. All we have to do is read this file:
final manifestJson = await DefaultAssetBundle.of(context).loadString('AssetManifest.json');
final images = json.decode(manifestJson).keys.where((String key) => key.startsWith('assets/images'));
When developing for iphone, in Xcode/Swift there is an asset file where you add all the icons your application will use with 1, 2 and 3x sizes. There is probably a similar thing with Android that I don't know yet.
When developing for Flutter:
How do you deal with the different screen resolutions to use the right icon sizes?
If similar to Xcode/Swift, where do you put those files and how do you get them? What about Android?
If you know a tutorial or web page, just let me know! The only ones that I found are only dedicated for app icon and launch screen.
Thanks
Just check the official documentation about resolution-aware-image.
This is based on the device pixel ratio.
Here you have an example about the structure of your files.
.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
And this is how you have to declare the assets files into your pubspec.file
flutter:
assets:
- icons/heart.png
This is the link: https://flutter.io/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets
To add to #diegoveloper answer.
Some plugins like google-maps do not honour this standard and require you to call BitmapDescriptor.fromAsset('icons/heart.png') which is not converted to the correct image. In this case you can get the correct image from AssetImage by first createLocalImageConfiguration using the BuildContext as defined here. Then use this configuration to resolve the correct image as follows:
ImageConfiguration config = createLocalImageConfiguration(context);
AssetImage('icons/heart.png')
.obtainKey(config)
.then((resolvedImage) {
print('Name: ' + resolvedImage.onValue.name);
});
In summary
Create an asset folder with the naming convention:
pathtoimages/image.png
pathtoimages/Mx/image.png
pathtoimages/Nx/image.png
pathtoimages/etc.
Where M and N are resolutions (2.0x) or themes (dark).
Then add the image or all the images to the pubspec.file as either
flutter:
assets:
- pathtoimages/image.png
or
flutter:
assets:
- pathtoimages/
Load the images in using either AssetImage('pathtoimages/image.png') or resolving to the actual file name as mentioned above, depending on the library being used.