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

The assets in the pubspec.yaml must be uncommented.
This will help to load the file image.asset as expected.

Answer 2

Try this :

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

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
                home: new ImageIcon(
                          new AssetImage(
                              "assets/images/image.png"),
                          size: 24.0,
                          color: Colors.white),
        );
    }
}

In pubspec.yaml, you need :

  assets:
    - assets/images/image.png

Answer 3

Here is another example which uses a jpg as a background image. It also applies opacity to the image.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: new AppBar(
          title: new Text("test"),
        ),
        body: new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop),
              image: new AssetImage("assets/images/keyboard.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 4

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<File> _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<File> 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/

Answer 5

use this package first:

import 'package:http/http.dart' show get;
import 'dart:io';

Image loadImageFromFile(String path) {
    File file = new File(path);
    Image img = Image.file(file);
}

void storeImageToFile(String path,String url) async {
    var response = await get(Url);
    File file = new File(path);
    file.create(recursive: true).then((val) async {
        if (await val.exists()) {
            await file.writeAsBytesSync(response.bodyBytes);
        }
    });
}