Image

A widget that displays an image.

Several constructors are provided for the various ways that an image can be specified:

• new Image, for obtaining an image from an ImageProvider.
• new Image.asset, for obtaining an image from an AssetBundle using a key.
• new Image.network, for obtaining an image from a URL.
• new Image.file, for obtaining an image from a File.
• new Image.memory, for obtaining an image from a Uint8List.

The following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP

To automatically perform pixel-density-aware asset resolution, specify the image using an AssetImage and make sure that a MaterialApp, WidgetsApp, or MediaQuery widget exists above the Image widget in the widget tree.

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

The Image.asset, Image.network, Image.file, and Image.memory constructors allow a custom decode size to be specified through cacheWidth and cacheHeight parameters. The engine will decode the image to the specified size, which is primarily intended to reduce the memory usage of ImageCache.

In the case where a network image is used on the Web platform, the cacheWidth and cacheHeight parameters are ignored as the Web engine delegates image decoding of network images to the Web, which does not support custom decode sizes.

See also:

• Icon, which shows an image from a font.
• new Ink.image, which is the preferred way to show an image in a material application (especially if the image is in a Material and will have an InkWell on top of it).
• Image, the class in the dart:ui library.

Inheritance

• Object
• Diagnosticable
• DiagnosticableTree
• Widget
• StatefulWidget
• Image

Image.asset Constructor

Creates a widget that displays an ImageStream obtained from the asset bundle. The key to the image is given by the name argument. The package argument must be non-null when displaying an image from the package and null otherwise.

How To Display Image in Flutter

The first step is, we need to create a new folder inside the flutter project root called assets. You can name it that folder anything you want but for this demo let us stick it with assets. Inside that folder, add one image manually. In my case it is Krunal.jpg. Remember, we are displaying the static image in the Flutter application.

Now, update the pubspec.yaml file.

Inside the yaml file, you can remove the comment on this part.

assets:
    - assets/Sumeet.jpg

Now, the last step is to replace the following code inside the lib >> main.dart file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('First app')),
        body: Column(
            children: <Widget>[
              Image.asset(
                'assets/Sumeet.jpg',
              ),
              Text('Me')
            ],
          ),
      ),
    );
  }
}

Constructors

Image({Key key, @required ImageProvider image, ImageFrameBuilder frameBuilder, ImageLoadingBuilder loadingBuilder, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low })Creates a widget that displays an image. […]

Image.asset(String name, { Key key, AssetBundle bundle, ImageFrameBuilder frameBuilder, String semanticLabel, bool excludeFromSemantics: false, double scale, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, String package, FilterQuality filterQuality: FilterQuality.low, int cacheWidth int cacheHeight })Creates a widget that displays an ImageStream obtained from an asset bundle. The key for the image is given by the name argument. […]

Image.file(File file, { Key key, double scale: 1.0, ImageFrameBuilder frameBuilder, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low, int cacheWidth int cacheHeight })Creates a widget that displays an ImageStream obtained from a File. […]

Image.memory(Uint8List bytes, { Key key, double scale: 1.0, ImageFrameBuilder frameBuilder, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low, int cacheWidth int cacheHeight })Creates a widget that displays an ImageStream obtained from a Uint8List. […]

Image.network(String src, { Key key, double scale: 1.0, ImageFrameBuilder frameBuilder, ImageLoadingBuilder loadingBuilder, String semanticLabel, bool excludeFromSemantics: false, double width, double height, Color color, BlendMode colorBlendMode, BoxFit fit, AlignmentGeometry alignment: Alignment.center, ImageRepeat repeat: ImageRepeat.noRepeat, Rect centerSlice, bool matchTextDirection: false, bool gaplessPlayback: false, FilterQuality filterQuality: FilterQuality.low, Map<String, String> headers, int cacheWidth int cacheHeight })Creates a widget that displays an ImageStream obtained from the network. […]