如何在Flutter中添加图像

Question

我是第一次开发Flutter应用程序..我在添加图像时遇到了问题。我有以下问题：

1. 在哪里创建图像文件夹？
2. 在pubspec.yaml中添加资产标签的位置？
3. 这需要资产文件夹吗？

我尝试了什么：

 assets:
    - images/lake.jpg

在pubspec.yaml里面：

完整档案：

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

错误日志：

#/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

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

我指的是这个教程https://flutter.io/tutorials/layout/

另外我想问一下，有什么工具可以在颤动中进行干净的重建，因为我找不到任何选择。

任何帮助，将不胜感激。

谢谢 ！

Answer 1

我认为错误是由冗余的,引起的

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

我还建议在包含assets文件的目录中创建一个pubspec.yaml文件夹，并在那里移动images并使用

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

如果将资产放在其他位置，assets目录将获得一些额外的IDE支持。

Answer 2

How to include images in your app

1. Create an assets/images folder

• 它应位于项目的根目录中，与pubspec.yaml文件位于同一文件夹中。
• 在Android Studio中，您可以在“项目”视图中单击鼠标右键
• 你不必称之为assets或images。你甚至不需要将images作为子文件夹。但是，无论你使用什么名称，都会在pubspec.yaml文件中重复使用。

2. Add your image to the new folder

• 您只需将图像复制到assets/images即可。例如，lake.jpg的相对路径将是assets/images/lake.jpg。

3. Register the assets folder in pubspec.yaml

• 打开项目根目录中的pubspec.yaml文件。
• 将assets子节添加到flutter部分，如下所示：

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

• 如果您想要包含多个图像，则可以不使用文件名，只使用目录名称（包括最终的/）：

  flutter:
    assets:
      - assets/images/

4. Use the image in code

• 使用Image.asset('assets/images/lake.jpg')在Image小部件中获取资源。
• 整个main.dart文件在这里：

  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. Restart your app

在对pubspec.yaml进行更改时，我发现我经常需要完全停止我的应用并重新启动它，尤其是在添加资产时。否则我会崩溃。

现在运行应用程序你应该有这样的东西：

Further reading

• 请参阅documentation了解如何为不同密度提供替代图像。

Answer 3

问题出在你的pubspec.yaml，这里你需要删除最后一个逗号。

uses-material-design: true,

Answer 4

将图像放入应用程序的另一种方法（对我而言，它只是按照这种方式工作）：

1 - 创建资产/图像文件夹

2 - 将图像添加到新文件夹

3 - 在pubspec.yaml中注册assets文件夹

4 - 使用此代码：

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

Answer 5

他们不需要创建资产目录并在它下面的图像目录，然后你把图像。更好的方法是在项目中创建存在pubspec.yaml的Images目录，并将图像放入其中并访问该图像，就像在tutorial / documention中所示

资产： - images / lake.jpg //在pubspec.yaml内

Answer 6

1. 在项目的根级别创建images文件夹。
2. 将图像放在此文件夹中，它应该看起来像
3. 转到你的pubspec.yaml文件，添加assets标题并密切关注所有空格。

   flutter:
   
     uses-material-design: true
   
     # add this
     assets:
       - images/profile.jpg

4. 点击IDE右上角的Packages get。
5. 现在，您可以在任何地方使用您的图像 Image.asset("images/profile.jpg")

Answer 7

在pubspec.yaml文件中添加assets目录时，请更多地关注空格

这是错的

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

这是正确的方法，

flutter:
  assets:
    - assets/images/