Question 244653 in Flutter Question posted in
The official Flutter documentation can be found here.

Unable to load asset image in flutter

I have the code as follows:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 158, 202, 239),
      body: Center(
          child: Container(
        decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(5))),
        height: 250,
        width: 180,
        child: Center(
          child: Container(
            child: const Image(
              image: AssetImage('assets/heart.png'),
            ),
          ),
        ),
      )),
    );
  }
}

The error I receive is as follows:

The following assertion was thrown resolving an image codec:
Unable to load asset: "assets/heart.png".

Exception: Asset not found

How can I fix it?

My pubspec.yaml is as follows

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/joker.jpeg
    - assets/heart.png
Tags:

4

Answers


  1. 0

    You need to update your pubspec.yaml file to include the assets you want to use.

    Open the pubspec.yaml file and add the following lines:

    flutter:
  assets:
    - assets/heart.png
    Login or Signup to reply.
  3. 0

    You can load all files of a folder just by adding the folder to assets in pubspec.yaml file.

    flutter:
  assets:
    - assets/

    if it doesn’t work follow these steps:

    1. Create an assets Folder:

      In your Flutter project directory, create a folder named assets at the same level as your lib directory. This is where you’ll place your asset files.

    2. Place Your Asset Files:

      Inside the assets folder, you can place various types of assets, such as images, fonts, JSON files, etc. For example, if you have an image file named sample.png, you would place it in the assets folder like this:

      project_root/
  ├── assets/
  │   └── sample.png
  ├── lib/
  └── ...

    3. Declare Assets in pubspec.yaml:

      Open your pubspec.yaml file, which is located at the root of your Flutter project, and add the following code to declare your assets. You need to specify the file or directory paths under the assets section:

      flutter:
  assets:
    - assets/sample.png

      If you have multiple assets, you can list them all under the assets section.

    4. Use the Asset in Your Code:

      To use the asset in your Flutter code, you can use the AssetImage widget for images or the rootBundle from the flutter/services.dart package for other types of assets. Here are examples for both cases:

      • For Images:

        You can use the AssetImage widget to display an image from your assets folder:

        Image(
  image: AssetImage('assets/sample.png'), // Replace with your asset path
)

      • For Other Asset Types (e.g., JSON):

        To read the content of other asset types like JSON, you can use rootBundle from the flutter/services.dart package:

        import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';

Future<void> loadAsset() async {
  final jsonString = await rootBundle.loadString('assets/data.json'); // Replace with your asset path
  final jsonMap = json.decode(jsonString);
  // Now you can use the JSON data as needed.
}

    5. Run flutter pub get:

      After declaring assets in your pubspec.yaml file, run the following command to ensure that Flutter recognizes the assets and includes them in your app:

      flutter pub get

    6. Access the Asset in the App:

      You can now access and use your assets as shown in step 4 within your Flutter app.

    Remember to replace 'assets/sample.png' or 'assets/data.json' with the actual paths to your asset files in your Flutter project.

    By following these steps, you can load and use various types of assets in your Flutter application.

    Login or Signup to reply.
  4. 0

    Stop the app and rerun the app, do not do a hot restart (Sometimes this will work)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search