Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load images with image.file

Tags:

flutter

dart

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. Image seems to require a stream, so I don't think that is what I am looking for.

import 'package:flutter/material.dart'; import 'dart:io';  void main() => runApp(new MyApp());  class MyApp extends StatelessWidget {     File file = new File("Someimage.jpeg");     @override     Widget build(BuildContext context) {         return new MaterialApp(             home: new Image.file(file),  //doesn't work, but no errors         );     } } 

I added Someimage to the pubspec.yaml file, but that doesn't work either:

assets:     - Someimage.jpeg 

Can someone give me an example of how this is done? Thanks.

like image 445
richalot Avatar asked Apr 14 '18 19:04

richalot


People also ask

Why is an image not loading?

Wrong Browser Configuration. Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.

Why can't I load my image in HTML?

Incorrect File Paths When you add images to a site's HTML or CSS file, you must create a path to the location in your directory structure where those files reside. This is code that tells the browser where to look for and fetch the image from. In most cases, this would be inside a folder named images.


1 Answers

The difference and relation between Image, ImageProvider:

Image:

Creates a widget that displays an image.

To show an image from the network or 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 the 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

like image 68
Phani Rithvij Avatar answered Sep 21 '22 19:09

Phani Rithvij