How to add asset image in Flutter

In this article I will tell you step by step how to add an asset image in Flutter.

  1. First of all create a root level folder called “assets”, you can name it anything else but the general naming convention is to name it so.
  2. You can create subfolders in this folder but we are not going to do so just to keep the article simple.
  3. Now drag an example image (lets say “a.png”) to the assets folder.
  4. Now head over to the pubspec.yaml file and head over to the section commented right under the “uses-material-design: true” line.
  5. We can see an example asset is commented out.
  6. We can either delete or ignore that comment for advanced developers but we are going to use it in this article for beginners sake.
  7. Simply select the portion from “assets” upto the example image path.
  8. Now hit “Ctrl”+”Shift”+”/” to uncomment the lines.
  9. Now change the path as required, here we justy need to change path to “assets/a.png”.
  10. Keep the spacing as shown in the example comments, pubspec.yaml is format sensitive.
  11. Run “pubspec get” to load the image into the project.
  12. Now you can use it anywhere using Image.asset(“assets/a.png”).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.