Adding images into Flutter application

Firstly lets create a default application using Flutter with below steps

Create a new Flutter project

1. Start Visual Studio Code application
2. Click View and select Command Palette
3. Search for ‘flutter’, and select the Flutter: New Project from the given options
4. Enter a project name of choice, make sure to use all small case letter or with underscore and then press Enter
5. Specify a location to place the project, and press OK

After project is loaded, you can run the app using flutter run from terminal and make sure to open iOS simulator or Android Emulator before running. I am using iOS simulator for this demo

When project is loaded to simulator, it should present you with default app with a button that increments by 1 on App’s UI as below

Now create a folder called images and copy the image file into it. Also, just in case make file name to all small case.

As shown in above image, I have dropped flutter.png file into images folder. Flutter accepts wide range of image types like .Jpeg, .jpg, .gif and others

Now go to main.dart file and add image control into default stateful widget like Image.asset(‘images/flutter.png’) into the body section. As you can notice in below code, images are accepted using .asset method using Image object by passing images relative path into it as parameter.

Now run app using ‘flutter run’ in terminal, now should be able see the image on the screen as below

I hope this blog is useful to you, happy coding.

Here is the link to git