Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between AssetImage and Image.asset - Flutter

Tags:

flutter

dart

In my application, I use these 2 classes but I don't know which one I should prioritize.

Image.asset('icons/heart.png') AssetImage('icons/hear.png') 

Maybe there is one who fetches the image faster.

like image 323
Guillaume Avatar asked Nov 14 '18 22:11

Guillaume


People also ask

What is asset image in Flutter?

Flutter apps can include both code and assets (sometimes called resources). An asset is a file that is bundled and deployed with your app, and is accessible at runtime.

What are the different types of image widgets in Flutter?

The following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. Additional formats may be supported by the underlying platform.

What is setup image asset in VS code Flutter?

open android studio File->Open folder->navigate to your flutter project and select the Android folder. Wait for it to sync, then navigate inside the Android studio folder and find the res folder right click on it and choose New you will see the Image asset studio.


2 Answers

Thanks @diegoveloper From flutter version 2.5, it is recommended to use the Image StatefulWidget with the const modifier which is impossible with Image.asset. However, you'll need to provide the image path as a parameter to the AssetImage object, where this object is the value of the named parameter 'image' of the Image StatefulWidget, like so.

  Image(         image: AssetImage('asset/dice1.png'),        ) 

From the recommended Dart tutorial book Dart Apprentice const and final modifiers on objects reduce subsequent compile-time and runtime. Therefore for clean and few lines of code, use Image.asset, but for fast and CPU-friendly code, use Image StatefulWidget.

like image 41
Mozes Avatar answered Oct 03 '22 01:10

Mozes


Image is a StatefulWidget and Image.asset is just a named constructor, you can use it directly on your widget tree.

AssetImage is an ImageProvider which is responsible for obtaining the image of the specified path.

If you check the source code of the Image.asset you will find that it's using AssetImage to get the image.

  Image.asset(String name, {       Key key,       AssetBundle bundle,       this.semanticLabel,       this.excludeFromSemantics = false,       double scale,       this.width,       this.height,       this.color,       this.colorBlendMode,       this.fit,       this.alignment = Alignment.center,       this.repeat = ImageRepeat.noRepeat,       this.centerSlice,       this.matchTextDirection = false,       this.gaplessPlayback = false,       String package,       this.filterQuality = FilterQuality.low,     }) : image = scale != null            ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)            : AssetImage(name, bundle: bundle, package: package),          assert(alignment != null),          assert(repeat != null),          assert(matchTextDirection != null),          super(key: key);  
like image 172
diegoveloper Avatar answered Oct 03 '22 01:10

diegoveloper