web-dev-qa-db-fra.com

Comment ajouter une image dans Flutter

Je développe l'application Flutter pour la première fois. J'ai un problème pour ajouter une image. J'ai une des questions ci-dessous:

  1. Où créer un dossier d'images?
  2. Où ajouter des éléments d'actif dans pubspec.ymal?
  3. Y a-t-il un dossier d'actifs nécessaire pour cela?

Ce que j'ai essayé: 

 assets:
    - images/lake.jpg

à l'intérieur de pubspec.ymal:

Dossier complet:

name: my_flutter_app
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true,
  assets:
    - images/lake.jpg

Journal des erreurs: 

#/properties/flutter/properties/uses-material-design: type: wanted [boolean] got true,
Error detected in pubspec.yaml:
Error building assets

FAILURE: Build failed with an exception.

* Where:
Script '/home/abc/Downloads/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 435

* What went wrong:
Execution failed for task ':app:flutterBuildDebug'.
> Process 'command '/home/abc/Downloads/flutter/bin/flutter'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s
Finished with error: Gradle build failed: 1

Mon code principal.Dart: 

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.Dart';
// Uncomment lines 7 and 10 to view the visual layout at runtime.
//import 'package:flutter/rendering.Dart' show debugPaintSizeEnabled;

void main() {
  //debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    'Oeschinen Lake Campground',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Text(
                  'Kandersteg, Switzerland',
                  style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          new Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          new Text('41'),
        ],
      ),
    );

    Column buildButtonColumn(IconData icon, String label) {
      Color color = Theme.of(context).primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Icon(icon, color: color),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          ),
        ],
      );
    }

    Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          buildButtonColumn(Icons.call, 'CALL'),
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE'),
        ],
      ),
    );

    Widget textSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Text(
        '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        softWrap: true,
      ),
    );

    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Top Lakes'),
        ),
        body: new ListView(
          children: [
            new Image.asset(
              'images/lake.jpg',
              width: 600.0,
              height: 240.0,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}

Je parle de ce tutoriel https://flutter.io/tutorials/layout/

Aussi, je veux demander s'il existe des outils pour une reconstruction propre dans le flutter, car je ne trouve aucune option pour cela.

Toute aide serait appréciée.

Merci !

flutterdartflutter-layout
25
Annie

Je pense que l'erreur est causée par le redondant ,

flutter:
  uses-material-design: true, # <<< redundant , at the end of the line
  assets:
    - images/lake.jpg

Je suggèrerais également de créer un dossier assets dans le répertoire qui contient le fichier pubspec.yaml et de déplacer images là-bas et d'utiliser

flutter:
  uses-material-design: true
  assets:
    - assets/images/lake.jpg

Le répertoire assets recevra un soutien supplémentaire de IDE que vous n’aurez pas si vous mettez des actifs ailleurs.

22
Günter Zöchbauer

Comment inclure des images dans votre application

1. Créez un dossier assets/images

  • Cela devrait être situé à la racine de votre projet, dans le même dossier que votre fichier pubspec.yaml.
  • Dans Android Studio, vous pouvez cliquer avec le bouton droit de la souris sur la vue Projet.
  • Vous n'êtes pas obligé de l'appeler assets ou images. Vous n'avez même pas besoin de faire de images un sous-dossier. Quel que soit le nom que vous utilisez, cependant, est ce que vous allez enregistrer dans le fichier pubspec.yaml.

2. Ajoutez votre image au nouveau dossier

  • Vous pouvez simplement copier votre image dans assets/images. Le chemin relatif de lake.jpg, par exemple, serait assets/images/lake.jpg.

3. Enregistrez le dossier des actifs dans pubspec.yaml

  • Ouvrez le fichier pubspec.yaml qui se trouve à la racine de votre projet.

  • Ajoutez une sous-section assets à la section flutter comme ceci:

    flutter:
  assets:
    - assets/images/lake.jpg

  • Si vous voulez inclure plusieurs images, vous pouvez laisser le nom du fichier et simplement utiliser le nom du répertoire (inclure le dernier /):

    flutter:
  assets:
    - assets/images/

4. Utilisez l'image dans le code

  • Obtenez l'actif dans un widget Image avec Image.asset('assets/images/lake.jpg').

  • Le fichier entier main.Dart est ici:

    import 'package:flutter/material.Dart';

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

// the root widget of our application
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Image from assets"),
        ),
        body: Image.asset('assets/images/lake.jpg'), //   <--- image here
      ),
    );
  }
}

5. Redémarrez votre application

Lors de la modification de pubspec.yaml , je dois souvent arrêter complètement mon application et la redémarrer à nouveau, en particulier lors de l'ajout d'éléments. Sinon, je tombe en panne.

Lancer l'application maintenant, vous devriez avoir quelque chose comme ça:

enter image description here

Lectures complémentaires

  • Voir le documentation pour savoir comment faire des choses comme fournir des images alternatives pour différentes densités.
52
Suragch

Le problème est dans votre pubspec.yaml, ici vous devez supprimer la dernière virgule.

uses-material-design: true,
6
Raouf Rahiche

il n’est pas nécessaire de créer un répertoire d’actifs et un répertoire d’images puis vous mettez une image. Le mieux est simplement de créer un répertoire Images dans votre projet où pubspec.yaml existe, d'y insérer des images et d'accéder à ces images comme dans le tutoriel/documention

assets: - images/lake.jpg // inside pubspec.yaml

4
Chetan Pawar

Une autre façon de mettre des images dans votre application (pour moi, cela fonctionnait comme ça):

1 - Créer un dossier assets/images

2 - Ajoutez votre image au nouveau dossier

3 - Enregistrez le dossier des actifs dans pubspec.yaml

4 - Utilisez ce code: 

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var assetsImage = new AssetImage('assets/images/mountain.jpg'); //<- Creates an object that fetches an image.
    var image = new Image(image: assetsImage, fit: BoxFit.cover); //<- Creates a widget that displays an image.

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Climb your mountain!"),
          backgroundColor: Colors.amber[600], //<- background color to combine with the picture :-)
        ),
        body: Container(child: image), //<- place where the image appears
      ),
    );
  }
}

Climb your mountain!

4
Fellipe Sanches

  1. Créez le dossier images au niveau racine de votre projet.

    enter image description here

    enter image description here

  2. Déposez votre image dans ce dossier, il devrait ressembler à

    enter image description here

  3. Allez dans votre fichier pubspec.yaml, ajoutez-en-tête assets et faites très attention à tous les espaces.

    flutter:

  uses-material-design: true

  # add this
  assets:
    - images/profile.jpg

  4. Tapez sur Packages get dans le coin supérieur droit de l'IDE.

    enter image description here

  5. Maintenant, vous pouvez utiliser votre image n'importe où en utilisant

    Image.asset("images/profile.jpg")
2
CopsOnRoad

Lorsque vous ajoutez un répertoire d’actifs dans le fichier pubspec.yaml, accordez plus d’attention aux espaces.

c'est faux

flutter:
   assets:
    - assets/images/lake.jpg

C'est la bonne façon,

flutter:
  assets:
    - assets/images/
1
maddy