Добавить изображение в приложение флаттера

Question

Добавить изображение в приложение флаттера

Я впервые разрабатываю приложение Flutter.. У меня проблема с добавлением изображения. У меня есть следующие вопросы:

Где создать папку с изображениями?
Где добавить тег активов в pubspec.ymal?
Для этого нужна какая-нибудь папка ресурсов?

Что я пробовал:

 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

Мой код 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/

Также я хочу спросить, есть ли какие-либо инструменты для чистой перестройки во флаттере, поскольку я не могу найти какие-либо варианты для этого..

Любая помощь будет оценена.

Спасибо!

186

android flutter dart flutter-layout

Источник

user9514919 18 июн '18 в 05:28

16 ответов

Решение

Как включить изображения в ваше приложение

Это более общий ответ для будущих зрителей.

1. Создать `assets/images` папка

Это должно быть расположено в корне вашего проекта, в той же папке, что и ваш pubspec.yaml файл.
В Android Studio вы можете щелкнуть правой кнопкой мыши в представлении проекта
Вы не должны называть это assets или же images, Вам даже не нужно делать images подпапка. Какое бы имя вы ни использовали, это то, что вы будете использовать в pubspec.yaml файл.

2. Добавьте свое изображение в новую папку

Вы можете просто скопировать ваше изображение в assets/images, Относительный путь lake.jpg, например, будет assets/images/lake.jpg,

3. Зарегистрируйте папку ресурсов в `pubspec.yaml`

Открой pubspec.yaml файл, который находится в корне вашего проекта.
Добавить assets подраздел к flutter раздел, как это:
```
flutter:
  assets:
    - assets/images/lake.jpg
```
Если у вас есть несколько изображений, которые вы хотите включить, вы можете не указывать имя файла и просто использовать имя каталога (включая окончательный вариант). /):
```
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
      ),
    );
  }
}

5. Перезапустите приложение

При внесении изменений в pubspec.yaml я обнаружил, что мне часто приходится полностью останавливать свое приложение и перезапускать его снова, особенно при добавлении ресурсов. В противном случае я получаю сбой.

Запустив приложение сейчас вы должны иметь что-то вроде этого:

дальнейшее чтение

См. Документацию о том, как сделать альтернативные изображения для разных плотностей.

336

Источник

user3681880 12 дек '18 в 22:04

Создайте images папка в корневом уровне вашего проекта.
Перетащите свое изображение в эту папку, оно должно выглядеть
Перейти к вашей pubspec.yaml файл, добавить assets Заголовок и обратите пристальное внимание на все пробелы.
```
flutter:

  uses-material-design: true

  # add this
  assets:
    - images/profile.jpg
```
Нажмите на Packages get в верхнем правом углу IDE.
Теперь вы можете использовать свое изображение в любом месте, используя
```
Image.asset("images/profile.jpg")
```

34

Источник

user6618622 27 июл '19 в 09:36

Использовать изображение во Flutter. Сделайте эти шаги.

1. Создайте каталог внутри папки ресурсов с именем images . Как показано на рисунке ниже

2. Поместите желаемые изображения в папку изображений.

3. Откройте файл pubpsec.yaml . И добавьте объявление своих изображений.

4. Используйте эти изображения в своем коде как.

        Card(
            elevation: 10,
              child: Container(
              decoration: BoxDecoration(
                color: Colors.orangeAccent,
              image: DecorationImage(
              image: AssetImage("assets/images/dropbox.png"),
          fit: BoxFit.fitWidth,
          alignment: Alignment.topCenter,
          ),
          ),
          child: Text("$index",style: TextStyle(color: Colors.red,fontSize: 16,fontFamily:'LangerReguler')),
                alignment: Alignment.center,
          ),
          );

12

Источник

user8546205 30 дек '20 в 11:31

Проблема в вашем pubspec.yaml здесь нужно удалить последнюю запятую

  uses-material-design: true,

11

Источник

user4511702 18 июн '18 в 05:33

Альтернативный способ размещения изображений в вашем приложении (для меня это просто работает):

1 - Создать папку ресурсов / изображений

2 - Добавьте свое изображение в новую папку

3 - Зарегистрируйте папку ресурсов в pubspec.yaml

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

10

Источник

user6036169 01 мар '19 в 15:58

Создайте каталог с активами так же, как на уровне lib

нравится

projectName
 -android
 -ios
 -lib
 -assets
 -pubspec.yaml

тогда ваш pubspec.yaml как

  flutter:
  assets:
    - assets/images/

теперь вы можете использовать Image.asset("/assets/images/")

9

Источник

user8859755 11 апр '20 в 11:42

-> Следуйте инструкциям ниже:

         -> Create 'assets/images' folder as in project module.
   -> put images which you want.
   -> use of image using this syntax. ex.
            - Image.asset('assets/images/tony.jpg')

    -> use image avatar which you want like, circle, square and much more as your need.
    -> Open 'pubspec.yaml' file
    -> write the code in 'flutter:' section. ex.
      -------------------------------
      uses-material-design: true
      assets:
       - assets/images/             // if multiple images you have then
       - assets/images/imagename.extension     // if single images you have then
      -------------------------------
    -> click on 'PUB GET' button which occurs on Right side of Screen above.
    -> Run App.
    -> if you get any issue then 
    -> Go to file -> Invalid caches/Restart -> Invalid Caches/Restart button
    -> Done.

Покажите изображения ниже, чтобы получить лучшее представление о реализации.

активы / модель пути к изображению

pubspec.yaml модель

7

Источник

user16418724 07 авг '21 в 13:14

При добавлении каталога ресурсов в файл pubspec.yaml больше внимания уделяйте пробелам

это не верно

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

Это правильный путь,

flutter:
  assets:
    - assets/images/

6

Источник

user4829654 19 июл '19 в 04:45

Их не нужно создавать каталог ресурсов и под ним каталог изображений, а затем вы помещаете изображение. Лучше просто создать каталог Images внутри вашего проекта, в котором существует pubspec.yaml, и поместить в него изображения и получить к ним доступ, как показано в руководстве / документации.

assets: - images/lake.jpg // внутри pubspec.yaml

5

Источник

user10082089 21 мар '19 в 07:46

Убедитесь, что вы создали папку с ресурсами в основном каталоге, а не в папке lib, введите здесь описание изображения .

2

Источник

ehsan mosavi 25 май '22 в 14:23

Если изображение находится внутри зависимости пакета, вы также должны указать имя пакета, событие, если вы ссылаетесь на изображение из той же зависимости!

      Image.asset("assets/pics/events_empty.png", package: "ui_elements"),

Ссылка: изображения активов в зависимостях пакетов

2

Источник

user1896554 24 апр '21 в 18:23

вы можете использовать это, чтобы увидеть доступ ко всему внутри активов, потому что могут быть папки, такие как изображения, логотип, значок и т. д.

создайте папку с ресурсами в корне проекта

      MyProject
    android
    assets
    ios
    lib
    test
    web
    windows
    .gitignore
    pubspec.yaml

и в вашем pubspec.yaml есть

      assets:
#   - images/a_dot_burr.jpeg
#  - images/a_dot_ham.jpeg

замените последние две строки на «assets/», чтобы иметь возможность прямого доступа ко всему внутри активов

если у вас есть непосредственно изображения в активах
```
        assets:
  - assets/
```

или если у вас есть подпапки в активах

        assets:
  - assets/folder1/
  - assets/folder2/
  - assets/folder3/

1

Источник

user12349305 20 апр '22 в 14:04

Создайте папку с ресурсами/изображениями и добавьте свое изображение в папку.

Зарегистрируйте папку с ресурсами в pubspec.yaml.

флаттер: активы:- assets/images/placeholder_circle_image.png

Если у вас есть несколько изображений

        flutter:
    assets:
      - assets/images/

Использовать изображение в коде

Image.asset('assets/images/item_entry/add_car_video.png', ширина: 100, высота: 100, размер: BoxFit.cover,cacheWidth:100 * MediaQuery.of(context).devicePixelRatio.round(),),

1

Источник

smebes 28 июл '22 в 14:06

1- Создайте новую папку внутри вашего приложения.

назовите это, например, «изображения»

2- Перетащите изображение в папку «изображения».

3. Перейдите в файл pubspec.yml, укажите путь к вашему изображению в разделе ресурсов.

например, название изображения «FlutterImage», напишите его так:

ресурсы:

активы/изображения/FlutterImage.jpg

*Примечание. Файл pubspec.yml очень чувствителен к любому пространству. Поэтому вводите код правильно, чтобы избежать ошибок.

4- вставьте код изображения в свой базовый код

Image.asset('assets/images/FlutterImage.jpg'),

Приятного кодирования :)

0

Источник

أفنان خالد 30 ноя '23 в 04:15

Ошибка, когда запятая находится в конце строки ниже

      uses-material-design: true,

когда строка после assets: отступ неверен, он выдает ошибку ниже

Если отступ исправлен, как показано ниже, то ошибка исправлена.

Если файл актива не добавлен, он выделяет его желтоватым фоном, но Pub get не выдает ошибку, но во время установки будет ошибка.

Короче говоря, отступ кода и синтаксис важны

Вы можете создать папку и ссылаться на нее, как показано

-1

Источник

user7923782 22 сен '21 в 12:46

Другие вопросы по тегам android flutter dart flutter-layout

user217408 18 июн '18 в 05:32 2018-06-18 05:32 · Accepted Answer · 2018-06-18 05:32

Я думаю, что ошибка вызвана избыточным ,

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, которой у вас не будет, если вы разместите ресурсы в другом месте.

Добавить изображение в приложение флаттера

16 ответов

Как включить изображения в ваше приложение

1. Создать assets/images папка

2. Добавьте свое изображение в новую папку

3. Зарегистрируйте папку ресурсов в pubspec.yaml

4. Используйте изображение в коде

5. Перезапустите приложение

дальнейшее чтение

1. Создать `assets/images` папка

3. Зарегистрируйте папку ресурсов в `pubspec.yaml`