Display asset images in Flutter
Images showing the implementation of this tutorial 1) Simple implementation with width argument. 2) Implementation of BoxFit.cover as value of fit argument. 3) Implementation of asset image as background of a container
Asset images are present in the asset bundle of the app. They are deployed with app and are readily available during run-time. Asset images can be displayed using the Image class in flutter.
Image class has constructors:
- Image.asset - To display image from assets bundle
- Image.file - To display image from a file
- Image.memory - To display image from Uint8List
- Image.network - To display image from a URL
Here in this tutorial, we use Image.asset to display an image from the assets bundle.
The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.
The image added inside the assets folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
Now everything is ready and we can do the coding to display our asset image.
This is a simple code snippet showing the implementation of Image.asset. Here we give the path to asset image and the width of the asset image to be displayed.
Fit Argument for Image
Instead of giving the width, you can fit the asset image inside a container with the fit argument. Here we use Boxfit.contain which makes the image contained inside the Container as shown in the image.
Image as the background of a Container
AssetImage Class can be used to display the asset image as the background of a container as shown in the example above.
How to clip images in Flutter?
A guide on how to clip images using clippy_flutter package in Flutter
Clipping using clippy_flutter package in Flutter
A guide on how to clip images circular, oval, rectangular and in custom shapes using custom clipper in Flutter
Custom Clipper in Flutter
A guide on how to create a custom clipper in Flutter