Flutter Image Widget | ImageView in Flutter

You are currently viewing Flutter Image Widget | ImageView in Flutter
Flutter Image Widget

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

Load Image from Assets
Load Image from Assets

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

Set Assets Folder
Set Assets Folder

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.

Flutter Image Widget Output
Flutter Image Widget Output

I hope this will help you with your project. 

See also  Swipe to Confirm Sliding Button in Flutter

Visit  https://flutter4u.com/  for getting many advanced-level projects, which may help you for your ongoing project.

Spread the love

Leave a Reply