200

I am developing Flutter app for the first time. I have an issue adding an image. I have a following questions:

  1. Where to create an images folder?
  2. Where to add assets tag in pubspec.ymal?
  3. Is there any assets folder needed for this?

What I tried:

 assets:
    - images/lake.jpg

inside pubspec.ymal :

Full file :

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

I am referring to this tutorial https://flutter.io/tutorials/layout/

Also, I want to ask if there are any tools for a clean rebuild in a flutter as I can't find any options for this.

3
  • your title too generic misleading many to here including me? mind changing it? Commented Dec 11, 2018 at 18:27
  • youtu.be/70G_XbpEyYk watch this Commented Aug 12, 2020 at 5:40
  • Huge thx the official documentation - very crealy! Nobody doesn't know where to place their images Commented Mar 3, 2023 at 7:19

16 Answers 16

352

How to include images in your app

1. Create an assets/images folder

  • This should be located in the root of your project, in the same folder as your pubspec.yaml file.
  • In Android Studio you can right click in the Project view
  • You don't have to call it assets or images. You don't even need to make images a subfolder. Whatever name you use, though, is what you will register in the pubspec.yaml file.

2. Add your image to the new folder

  • You can just copy your image into assets/images. The relative path of lake.jpg, for example, would be assets/images/lake.jpg.

3. Register the assets folder in pubspec.yaml

  • Open the pubspec.yaml file that is in the root of your project.
  • Add an assets subsection to the flutter section like this:
flutter:
  assets:
    - assets/images/lake.jpg
  • If you have multiple images that you want to include then you can leave off the file name and just use the directory name (include the final /):
flutter:
  assets:
    - assets/images/

Note: Make sure to use the exact number of spaces. That's 2 spaces per indentation.

4. Use the image in code

  • Get the asset in an Image widget with Image.asset('assets/images/lake.jpg').
  • The entire main.dart file is here:
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
      ),
    );
  }
}

5. Restart your app

When making changes to pubspec.yaml I find that I often need to completely stop my app and restart it again, especially when adding assets. Otherwise I get a crash.

Running the app now you should have something like this:

enter image description here

Further reading

  • See the documentation for how to do things like provide alternate images for different densities.

Videos

The first video here goes into a lot of detail about how to include images in your app. The second video covers more about how to adjust how they look.

0
94

I think the error is caused by the redundant ,

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

I'd also suggest to create an assets folder in the directory that contains the pubspec.yaml file and move images there and use

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

The assets directory will get some additional IDE support that you won't have if you put assets somewhere else.

10
  • Thank you sir for reply.. I have created assets directory and inside that created images directory and out an image inside it.. also removed "," .. but now getting this error No file or variants found for asset: images/lake.jpg.
    – Annie
    Commented Jun 18, 2018 at 5:36
  • 1
    You still need to add assets directory to the file path asset: assets/images/lake.jpg Commented Jun 18, 2018 at 5:37
  • Sir i have one more query.. as I have done one demo in main.dart and successfully completed it.. now i am making another demo in the same file by removing previous code.. i got an output of that new demo but now when i check app from apk it is showing first demo instead the current one.. is there anything i am doing wrong?
    – Annie
    Commented Jun 18, 2018 at 7:13
  • 1
    You might need to run flutter clean to make flutter run or flutter build take up changes. I think the Flutter team is aware of the issue and it happens quite frequently, but I can't tell if they can fix it soon. Commented Jun 18, 2018 at 7:35
  • 1
    You need to execute it in a command line shell in your Flutter project directory (where pubspec.yaml is) Commented Jun 18, 2018 at 7:51
34
  1. Create images folder in root level of your project.

    enter image description here

    enter image description here

  2. Drop your image in this folder, it should look like

    enter image description here

  3. Go to your pubspec.yaml file, add assets header and pay close attention to all the spaces.

    flutter:
    
      uses-material-design: true
    
      # add this
      assets:
        - images/profile.jpg
    
  4. Tap on Packages get at the top right corner of the IDE.

    enter image description here

  5. Now you can use your image anywhere using

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

To use image in Flutter. Do these steps.

1. Create a Directory inside assets folder named images. As shown in figure belowenter image description here

2. Put your desired images to images folder.

3. Open pubpsec.yaml file . And add declare your images.Like:--enter image description here

4. Use this images in your code as.

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

The problem is in your pubspec.yaml, here you need to delete the last comma.

uses-material-design: true,
1
  • And also make sure assets: is aligned with uses-material-design Commented Jul 25, 2020 at 18:15
10

An alternative way to put images in your app (for me it just worked that way):

1 - Create an assets/images folder

2 - Add your image to the new folder

3 - Register the assets folder in pubspec.yaml

4 - Use this code:

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

Climb your mountain!

9

Create your assets directory the same as lib level

like this

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

then your pubspec.yaml like

  flutter:
  assets:
    - assets/images/

now you can use Image.asset("/assets/images/")

7

Follow Below Steps One OR Multiple Image Insertion:

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

See Below Images to Get a Better idea of Implementation.

   •• Here, add image file like below. ••

enter image description here

   •• Here, add image file Description in PUBSPEC.YAML file like below. ••

enter image description here

6

When you adding assets directory in pubspec.yaml file give more attention in to spaces

this is wrong

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

This is the correct way,

flutter:
  assets:
    - assets/images/
1
  • Whao! I was getting an error until I tried your answer. The devil is truly in the details. Thanks a lot!
    – Emzor
    Commented Mar 20, 2020 at 18:32
5

their is no need to create asset directory and under it images directory and then you put image. Better is to just create Images directory inside your project where pubspec.yaml exist and put images inside it and access that images just like as shown in tutorial/documention

assets: - images/lake.jpg // inside pubspec.yaml

3

If the image is inside a package dependency, you should also provide the package name, event if you are referencing the image from the same dependency!

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

Ref: Asset images in package dependencies

2

you can rather use this to see access to everything inside assets, because there may be folders like images, logo, icon, etc...

create the assets folder in the root of the project

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

and in your pubspec.yaml, there are

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

replace the last two lines by the 'assets/' to be able to directly access everything inside assets

  • if you have directly images in assets

    assets:
      - assets/
    
  • or if you have sub folders in assets

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

Make sure you create the assets folder in the main directory, not in the lib folder.

enter image description here

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented May 26, 2022 at 6:43
1
  1. Create an assets/images folder and Add your image to the folder

enter image description here

  1. Register the assets folder in pubspec.yaml

    flutter: assets: - assets/images/placeholder_circle_image.png

If you have multiple images

  flutter:
    assets:
      - assets/images/

enter image description here

  1. Use the image in code

    Image.asset( 'assets/images/item_entry/add_car_video.png', width: 100, height: 100, fit: BoxFit.cover, cacheWidth:100 * MediaQuery.of(context).devicePixelRatio.round(), ),

enter image description here

0

1- Create a new folder inside your application.

name it for example ‘images’

2- Drag and drop your picture inside the ‘images’ folder.

3- Go to your pubspec.yml file, put the path of your image in the assets section.

for example the name of the picture is 'FlutterImage' write it like this:

assets:

  • assets/images/FlutterImage.jpg

*Note: The pubspec.yml file is very sensitve of any space, So type your code correctly to avoid errors.

4- insert the image code in your base code

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

Happy coding :)

-2

Error when comma is at the end of below line

uses-material-design: true,

enter image description here

when the line after assets: indent is not correct it throws below error

enter image description here

If the indent is corrected as shown in below, then error is fixed.

enter image description here

If the asset file is not added then it highlights that with yellowish background but Pub get doesn't throw error but there will be an error during installation.

In short, Code Indent and syntax is important

You can create a folder and reference it as shown

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.