web-dev-qa-db-fra.com

Comment charger des images avec image.file

Je n'arrive pas à charger simplement une image du disque dur à l'écran. Image.Network semble simple. Mais je n'arrive pas à comprendre comment utiliser Image ou Image.file. L'image semble nécessiter un flux, donc je ne pense pas que ce soit ce que je recherche. 

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

J'ai ajouté Someimage au fichier pubspec.yaml, mais cela ne fonctionne pas non plus:

assets:
    - Someimage.jpeg

Quelqu'un peut-il me donner un exemple de la façon dont cela est fait? Merci.

dartflutter
5
rchkm

Voici un autre exemple qui utilise un jpg comme image d’arrière-plan. Il applique également une opacité à l'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,
              ),
            ))));
  }
}
2
Rockvole

Voici un exemple d'utilisation de Image.file. Ce ne serait pas la manière recommandée, mais le cas d'utilisation pourrait être si vous téléchargiez l'image dans votre application via http et que vous vouliez ensuite afficher l'image (par exemple, l'image n'est pas stockée dans des éléments lors de l'installation).

Dans votre pubspec.yaml, ajoutez:

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();
            })
    );
  }
}

Pour simuler le téléchargement de l'image, vous pouvez pousser l'image à l'aide de adb:

adb Push image.png /data/data/com.example.imagetest/app_flutter/flutter_assets/
7
Rockvole

Essaye ça :

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

Dans pubspec.yaml, vous avez besoin de:

  assets:
    - assets/images/image.png
1
Rockvole

si votre image dans les actifs, vous pouvez utiliser le constructeur image.asset

0
Raouf Rahiche