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

Here is an example of the use of Image.file. This would not be the recommended way, but the use case could be if you downloaded the image in your app via http and then wanted to display the image (e.g. the image is not stored in assets during install).

In your pubspec.yaml, add :

path_provider: ^0.2.2

Code :

import 'dart:io';
import 'dart:async';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  Future _getLocalFile(String filename) async {
    String dir = (await getApplicationDocumentsDirectory()).path;
    File f = new File('$dir/$filename');
    return f;
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new FutureBuilder(
            future: _getLocalFile("flutter_assets/image.png"),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return snapshot.data != null ? new Image.file(snapshot.data) : new Container();
            })
    );
  }
}

To simulate downloading the image you can push the image using adb :

adb push image.png /data/data/com.example.imagetest/app_flutter/flutter_assets/