首页 文章

在flutter app中添加图片

提问于
浏览 次
5

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

  • 在哪里创建图片文件夹？

  • 在pubspec.ymal中添加资产标签的位置？

  • 这需要资产文件夹吗？

What I tried :

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

Error log :

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

My main.dart code :

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

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

任何帮助，将不胜感激 .

谢谢 ！

android dart flutter flutter-layout

3 回答

  • 10

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

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

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

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

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

    回复于
  • 4

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

    uses-material-design: true,
    回复于
  • 1

    如何在您的应用中包含图片

    对于未来的 Spectator 来说，这是一个更普遍的答案 .

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

    • 这应该位于项目的根目录中，与 pubspec.yaml 文件位于同一文件夹中 .

    • 在Android Studio中，您可以在项目视图中右键单击

    • 您不必将其称为 assets 或 images . 你甚至不需要制作 images 子文件夹 . 但是，无论您使用什么名称，都将在 pubspec.yaml 文件中重复使用 .

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

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

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

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

    • 将 assets 小节添加到 flutter 部分，如下所示：

    flutter:
  assets:
    - assets/images/lake.png
    • 如果您要包含多个图像，则可以不使用文件名，只使用目录名称（包括最终的 / ）：
    flutter:
  assets:
    - assets/images/

    4.在代码中使用图像

    • 使用 Image.asset('assets/images/lake.jpg') 获取图像窗口小部件中的资源 .

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

    enter image description here

    进一步阅读

    • 有关如何为不同密度提供备用图像的操作，请参阅documentation .
    回复于

相关问题