flutterimagedart

How to load images with image.file


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.


Solution

  • 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,
                ),
              ),
            ),
          ),
        );
      }
    }