如何在flatter中添加图像

Question

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

1. 在哪里创建图像文件夹？
2. 在哪里添加资产标签pubspec.ymal?
3. 这需要任何资产文件夹吗？

我所尝试的：

 assets:
    - images/lake.jpg

在pubspec内部。ymal：

完整文件：

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

我的主菜。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

>

将图像放到这个文件夹中，它应该是

转到您的pubspec。yaml文件，添加资产标题，并密切注意所有空格。

flutter:

  uses-material-design: true

  # add this
  assets:
    - images/profile.jpg

点击IDE右上角的packagesget。

现在，您可以使用

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

Answer 2

匿名用户

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

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

我还建议在包含pubspec的目录中创建一个assets文件夹。yaml将图像归档并移动到那里并使用

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

assets目录将获得一些额外的IDE支持，如果将资产放在其他地方，您将无法获得这些支持。

Answer 3

• 它应该位于项目的根目录中，与您的pubspec.yaml文件位于同一文件夹中。
• 在Android Studio中，您可以在Project视图中右键单击
• 您不必将其称为资产或图像。您甚至不需要使图像成为子文件夹。不过，无论您使用什么名称，您都将在pubspec.yaml文件中重新编码。

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

>

打开pubspec。yaml项目根目录中的文件。

将资产子部分添加到颤振部分，如下所示：

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

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

  flutter:
    assets:
      - assets/images/

>

使用Image在图像小部件中获取资产。资产（'assets/images/lake.jpg'）。

整个main。dart文件在这里：

  import 'package:flutter/material.dart';

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

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

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

现在运行应用程序时，您应该具有以下内容：

• 有关如何为不同密度提供备用图像等操作，请参阅文档

这里的第一个视频详细介绍了如何在应用程序中包含图像。第二个视频介绍了如何调整它们的外观。

• 颤动教程-1/2图像-深潜
• 颤动教程-2/2图像-深潜