Comment ajouter une image dans Flutter

Question

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

1. Où créer un dossier d'images ?
2. Où ajouter la balise assets dans pubspec.ymal ?
3. Un dossier d'actifs est-il nécessaire pour cela ?

Ce que j'ai essayé :

 assets:
    - images/lake.jpg

dans 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 main.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 me réfère à ce tutoriel https://flutter.io/tutorials/layout/

J'aimerais également savoir s'il existe des outils pour une reconstruction propre dans Flutter, car je ne trouve aucune option pour cela.

Toute aide serait appréciée.

Merci !

Answer 1

Comment inclure des images dans votre application

1. Créez un assets/images dossier

• Il doit être situé dans la racine de votre projet, dans le même dossier que votre fichier pubspec.yaml fichier.
• Dans Android Studio, vous pouvez faire un clic droit dans la vue Projet
• Vous n'avez pas à l'appeler assets ou images . Vous n'avez même pas besoin de faire images un sous-dossier. Cependant, quel que soit le nom que vous utilisez, c'est celui que vous enregistrerez dans l'application pubspec.yaml fichier.

2. Ajoutez votre image dans le 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 pubspec.yaml qui se trouve dans la racine de votre projet.

• Ajouter un assets sous-section à la flutter section comme celle-ci :

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

• Si vous souhaitez inclure plusieurs images, vous pouvez omettre le nom du fichier et utiliser simplement le nom du répertoire (en incluant le caractère final de l'image). / ) :

  flutter:
    assets:
      - assets/images/

4. Utiliser l'image dans le code

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

• L'ensemble du 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

Lorsque vous apportez des modifications à pubspec.yaml Je constate que j'ai souvent besoin d'arrêter complètement mon application et de la redémarrer, notamment pour ajouter des actifs. Sinon, j'obtiens un plantage.

En lançant l'application, vous devriez obtenir quelque chose comme ceci :

Autres lectures

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

Answer 2

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ère également de créer un assets dans le répertoire qui contient le pubspec.yaml et déplacer images là et utiliser

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

Le site assets L'annuaire obtiendra un soutien supplémentaire de l'IDE que vous n'aurez pas si vous placez vos actifs ailleurs.

Answer 3

1. Créer images dans le niveau racine de votre projet.

   

   

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

   

3. Allez à votre pubspec.yaml ajoutez assets et faites bien 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.

   

5. Vous pouvez maintenant utiliser votre image partout en utilisant

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

Answer 4

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

uses-material-design: true,

Answer 5

Une autre façon d'intégrer des images dans votre application (pour moi, c'est comme ça que ça marche) :

1 - Créez un dossier assets/images

2 - Ajoutez votre image au nouveau dossier

3 - Enregistrez le dossier assets 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
      ),
    );
  }
}