How to load images with image.file

Question

I can\'t seem to simply load an image from the hard drive to the screen. Image.network seems straightforward. But I can\'t figure out how to use Image or Image.file. Imag

Answer 1

You can add Image.File as Container's child

Container(
     padding:
        EdgeInsets.zero,
         height: 150,
               width: 150,
               child: Image.file(File(filePath))
   )

Answer 2

Replace

new Image.file(file)

with

FileImage(file)

and that should work for you.

Answer 3

Flutter contains assert section inside pubspec.yaml where it contains asserts of your application. eg:

assets:
    - data_repo/img/ic_launcher.png

1. With pubspec.yaml:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: LoadLocalImage()));
}

class LoadLocalImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Load Local Image"),
      ),
      body: new Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage('data_repo/img/ic_launcher.png'), fit: BoxFit.cover)),
      ),
    );
  }
}

2. With Image.asset:

import 'package:flutter/material.dart';

    void main() {
      runApp(new MaterialApp(home: LoadLocalImage()));
    }

    class LoadLocalImage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Load Local Image"),
            ),
            body: Image.asset(
              'data_repo/img/ic_launcher.png',
              fit: BoxFit.cover,
            ));
      }
    }

Folder Structure: Output:

Please refer below link for more description:

https://flutter.dev/docs/cookbook/images/network-image

Answer 4

The difference and relation between Image, ImageProvider:

Image:

Creates a widget that displays an image.

To show an image from the network or from an asset bundle, consider using [new Image.network] and [new Image.asset] respectively.

So Image is a widget. Like <img> tag in html.

ImageProvider:

Identifies an image without committing to the precise final asset. This allows a set of images to be identified and for the precise image to later be resolved based on the environment, e.g. the device pixel ratio.

So ImageProvider is like the src attribute for an Image.

Now Image takes an argument image which is an ImageProvider. There are 4 ways of getting the ImageProvider

• AssetImage:

Use to load a pre-defined set of images that are packed along with the apk.

e.g. To display Banner Images, some custom icons.

• NetworkImage:

Used to load dynamic images from the internet.

• FileImage:

Used to load images from the file system in the target device. e.g. To display a newly downloaded image.

• MemoryImage:

Used to load raw image from memory.

e.g. To get user's wallpaper and load it into a widget.

Now they are all ImageProviders. Anyone of them can be used as the image attribute to the Image widget. And the flutter community simplified the syntax by adding extended classes to the Image widget itself.

So

• Image.asset(name) is essentially Image(image: AssetImage(name)),
• Image.file(path) is essentially Image(image: FileImage(File(path))),
• Image.network(url) is essentially Image(image: NetworkImage(url)),
• Image.memory(list) is essentially Image(image: MemoryImage(list))

Now it should be clear that

• The apk size increases with the number of asset images.

• The loading time (what the user sees) for them would be generally in the order

  NetworkImage > FileImage > AssetImage > MemoryImage

Answer 5

child: Image.file(
 File('DirectoryLocation/imageName.jpg'),
 height: 45.0,
 width: 45.0,
),

Answer 6

if your image in the assets you can use the image.asset constructor