Flutter image not showing

Question

The image is not showing. While running, it shows this error but it is running without image. I have used tab between the '-' and the image path. I have also created a folder called assets and a subfolder slider_icons and included my images in it.

This is exactly how my pubspec.yaml looks like,

flutter:

  uses-material-design: true

  assets:
  - assets/slider_icons/burger.png
  - assets/slider_icons/pizza.png
  - assets/slider_icons/biryani.png
  - assets/slider_icons/parotta.jpeg
  - assets/slider_icons/cup.png
  - assets/slider_icons/drink.png
  - assets/slider_icons/chicken-fries.png

Error:-

[foodie] flutter pub get

Error detected in pubspec.yaml: Error on line 48, column 7: Expected a key while parsing a block mapping. ╷ 48 │ assets: │ ^ ╵ Please correct the pubspec.yaml file at F:\Learn flutter\foodie\pubspec.yaml exit code 1

This is the screen shot of my screen

Can you provide the error code as well? – Daniel Nov 09 '20 at 07:28 — Daniel, Nov 09 '20 at 07:28
check log,did it display any errors? – John Joe Nov 09 '20 at 07:50 — John Joe, Nov 09 '20 at 07:50
Yes it displays error...I will post the error too – Divya Nov 09 '20 at 08:43 — Divya, Nov 09 '20 at 08:43
Thank you so much for helping me. The problem is solved – Divya Nov 09 '20 at 10:47 — Divya, Nov 09 '20 at 10:47

score 1 · Accepted Answer · answered Nov 09 '20 at 09:35

1

The word assets: has to go exactly under the # and the - needs two spaces. Additionally, when you use images from the same folder you can add all the images with one line as written below.

How it should be written:

# To add assets to your application, add an assets section, like this:
assets:
  - assets/slider_icons/

answered Nov 09 '20 at 09:35

Jordan Kotiadis

558
6
21

if you have deleted the default comment you should just add 2 spaces from the beginning of the word, assets: – Jordan Kotiadis Nov 09 '20 at 09:39

score 0 · Answer 2 · edited Nov 08 '20 at 20:51

0

The way to include an image inside Flutter is:

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

You also have to create a directory where you can put the resource inside it.

edited Nov 08 '20 at 20:51

Jeremy Caney

7,102
69
48
77

answered Nov 08 '20 at 20:47

vincenzoR

1
1

I did this exact way...But still the image isn't showing. I have also created the folders and brought all the images into the folder – Divya Nov 09 '20 at 07:21

Flutter image not showing

2 Answers2