Flutter | Display Text And Images From API

NOTE : The API used for this tutorial is https://unpossiblepog.com/flutter-json/data.php

Step 1 : Download project’s ZIP file from following link. Extract it.

https://unpossiblepog.com/projects/FLUTTER+JSON/Display-Text-And-Images-From-JSON-REST-API

------------------------

Step 2 : Open “pubspec.yaml” file, the option will automatically appear in ANDROID STUDIO to download library, mostly the link’s label will be “Pub get”. Click on it to download library.

------------------------

Step 3 : Run the project, click on “REDIRECT” button which will show new page with API’s data inside it.

------------------------

Step 4 (Optional) : On “Unpossible.dart” file, line number 63 & 64 represent TITLES ad IMAGES respectively. Use any one of them to switch between TITLES and IMAGES.

===================

QUICKSTART to Display DATA and IMAGES from JSON API To Flutter App.

-------------------------------

Instructions:-

https://unpossiblepog.blogspot.com/2021/07/flutter-display-text-and-images-from-api.html

Download Project:-

https://unpossiblepog.com/projects/FLUTTER+JSON/Display-Text-And-Images-From-JSON-REST-API

Subscribe my Channel:- 

http://www.youtube.com/user/SanketRooney?sub_confirmation=1 

Facebook Page:- 

https://www.facebook.com/UnpossibleNS 

Twitter Account:- 

https://twitter.com/UnpossiblePOG 

Blog:- 

https://unpossiblepog.blogspot.com/ 

Website:- 

https://unpossiblepog.com/ 

Gaming Instagram:- (@unpossiblepoggaming)

https://www.instagram.com/unpossiblepoggaming/

-------------------------------

This tutorial will help you to quickly extract data from JSON file and display text or images on flutter application.

Let’s get started.

This blog contains steps that we have to follow.

There is an API link given at the top. We will be using this data which contains texts and image links.

From 1st step, download the project by clicking on the link. Click on “HERE” button to download the project.

Go to the place where it is downloaded and extract it.

Now, open the studio where you run the flutter app.

Go to the place where you extracted that file.

You will see the ICON with name as “api_quickstart”.

In studio, open the “pubspec.yaml” file. You will see the “PUB GET” link somewhere on the studio. Click on it to download important libraries which will help to extract data from API.

Let’s run the project.

Click on “REDIRECT” button, you will see titles.

If you want to see the images, open the “Unpossible.dart” file inside LIB folder.

Comment line number 63 and remove the comment from line number 64.

Let’s run it again.

So that is it, thanks for watching. Like share and subscribe.