Flutter Image Widget
The image widget is used to display an image in the application. Image widget provides different constructors to load images from multiple sources and they are as follows:
Image — Generic image loader using ImageProvider
Image.asset — Load image from flutter project’s assets
Image.file — Load image from the system folder
Image.memory — Load image from memory
Image.Network — Load image from network
The easiest option to load and display an image in Flutter is by including the image as an asset of the application and load it into the widget on demand.
Create a folder, assets in the project folder and place the necessary images Specify the assets in the pubspec.yaml as shown below:
flutter: assets: — assets/smiley.png
Now, load and display the image in the application. Image.asset(‘assets/smiley.png’)
The complete source code of MyHomePage widget of the hello world application and the result is as shown below:
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text(this.title), ),
body: Center( child: Image.asset(“assets/smiley.png”) ), ); }
The most important properties of the Image widget are as follows:
image, ImageProvider: Actual image to load
width, double — Width of the image
height, double — Height of the image
alignment, AlignmentGeometry — How to align the image within its bounds
