Adding images into Flutter application

1 flutter_blog-2-750x400-1.png

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

screen-shot-2019-03-06-at-12.31.58-pm.png

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

screen-shot-2019-03-06-at-12.34.15-pm.png

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

screen-shot-2019-03-06-at-12.35.58-pm.png

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

screen-shot-2019-03-06-at-5.52.00-pm.png

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.

screen-shot-2019-03-06-at-5.54.46-pm.png

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

screen-shot-2019-03-06-at-5.57.16-pm.png

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

Here is the link to git