Flutter Image Widget | ImageView in Flutter
Image View is the most important part of developing any application. Like all other technology, Flutter also has the Image View, from which you can show images locally or from the network.
Flutter Image Widgets allow different types of images in the mobile application.
Image formats that are supported by flutter are JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.
Check the below code for understanding the Image View in a flutter.
Properties of Image Widget
There are few important properties of Image Widget, let’s understand them.
Width & Height
You can set the width and height of the image widget using these two properties. Check the below code for this.
Image.network( 'https://www.flutter4u.com/wp-content/uploads/2021/07/Flutter4U_new.png', width: 200, height: 200, )
Color
If you don’t want to use the image’s original color so you can change it using this property. Check the below code for this.
Image.network( 'https://www.flutter4u.com/wp-content/uploads/2021/07/Flutter4U_new.png', width: 200, height: 200, color: Colors.blueAccent, )
Fit
This property is used to define the scale type of image, how you want to show an image on the Image Widget, this will show it. The value should be in BoxFit, check the below syntax and try using different types of values in BoxFit, like the cover, fill, contain, fitWidth, fitHeight etc. I used fill here. Use it according to your app requirement.
Image.network( 'https://www.flutter4u.com/wp-content/uploads/2021/07/Flutter4U_new.png', width: 200, height: 200, fit: BoxFit.fill, )
Alignment
Using this property you can align your image, check the below syntax for using this.
Image.network( 'https://www.flutter4u.com/wp-content/uploads/2021/07/Flutter4U_new.png', width: 200, height: 200, alignment: Alignment.center, )
loadingBuilder
This is a very important and useful property when you load a network image. You can show a loading bar using this property until your image is not loaded in the Image Widget. Check the below syntax for this property. Flutter made it very easy.
Image.network( 'https://www.flutter4u.com/wp-content/uploads/2021/07/Flutter4U_new.png', width: 200, height: 200, loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) { if (loadingProgress == null) { return child; } return Center( child: CircularProgressIndicator( value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null, ), ); })
If you want to load a local image so you need to keep your image in the asset folder and then need to call like below syntax
Image.asset('assets/images/logo.png')
Also, check how you can keep this image in the folder

Then go to pubspec.yaml file and add assets folder there as I did.

Example
Here is the complete example which is showing how to display an image from a URL in a flutter.
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Image Widget Example', style: TextStyle(fontSize: 15.0), ), ), body: Container( alignment: Alignment.center, color: Colors.black, padding: EdgeInsets.all(10.0), child: Image.network( 'https://www.flutter4u.com/wp-content/uploads/2021/07/Flutter4U_new.png', width: 200, height: 200, loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) { if (loadingProgress == null) { return child; } return Center( child: CircularProgressIndicator( value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes! : null, ), ); }, ))); } }
Output
Below is the output of the above Example.

I hope this will help you with your project.
Visit http://flutter4u.com/ for getting many advanced-level projects, which may help you for your ongoing project.