Making Http requests and Using Json in Dart's Flutter Framework by tensor

View this thread on: hive.blog | peakd.com | ecency.com

utopian-io · @tensor · Mar 5 '18 (edited)

$30.71

Making Http requests and Using Json in Dart's Flutter Framework

#### What Will I Learn?

- You will learn how to make a HTTP GET request in the Flutter framework to get information from an API
- You will learn how to parse Json and then serve it to other parts of your Flutter application
- You will learn how to build List Views and dynamic User Interfaces in Flutter
- You will learn how to make use of the Hot Reload feature in Flutter for iterative development 

#### Requirements

- [IDEA intellij](https://www.jetbrains.com/idea/) or [Visual Studio Code](https://code.visualstudio.com/) with the Dart/Flutter [Plugins](https://github.com/flutter/flutter-intellij)
- The [Dart SDK](https://www.dartlang.org/install) and the [Flutter SDK](https://flutter.io/get-started/install/)
- A fair understanding of Mobile development and Imperative or Object Oriented Programming

#### Difficulty

- Intermediate


#### Description
In this video tutorial, we look at how we can make **HTTP requests** and **Parse JSON** from a **Web API** using **Dart's Flutter Mobile Framework**.   Specifically, we look use an **HTTP GET** request to retrieve data from the **Star Wars API**, [Swapi](https://swapi.co), which we then can serve onto a **List View widget** in our **Flutter Application**.  This style of application is useful because it allows us to serve data without attaching a database to our application or hard-coding the date into our application.  We can also make use of this method to retrieve data from **external APIs** such as the **Google Maps API** or any other public API service.

Our Application makes use of **Dart's Async Isolates** to call the **HTTP request** so that the **User interface** can render while the request is being made.  If the request fails, the User interface still will render properly.  The **HTTP request** grabs ten elements which populates our **List View Widget** and we can chose which properties we want to serve to our **Front-End** from the **JSON**.  We also make use of **Flutter's Hot Reload feature** in this tutorial and show off the **Flutter Visual Studio Code Extensions**. 

The Dart-Code Visual Studio Code Extension can be found [here](https://github.com/Dart-Code/Dart-Code)

The source code for this project can be found [here](https://github.com/tensor-programming/Flutter_calling_api)


#### Video Tutorial
<iframe width="560" height="315" src="https://www.youtube.com/embed/xfdG8e9mgU4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

#### Curriculum

- [Dart Flutter Cross Platform Chat Application Tutorial](https://steemit.com/@tensor/dart-flutter-cross-platform-chat-application-tutorial)
- [Building a Multi-Page Application with Dart's Flutter Mobile Framework](https://utopian.io/u/36304896)    

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tensor/making-http-requests-and-using-json-in-dart-s-flutter-framework">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>

👍 utopian-io, steemstem, pharesim, kevinwong, abigail-dantes, justtryme90, qurator, kerriknox, lemouth, tensor, mys, mobbs, grandpere, luoq, fredrikaa, mrs.agsexplorer, anarchyhasnogods, trumpman, timsaid, robertlyon, cifer, thevenusproject, omstavan, mountain.phil28, steemstem-bot, dber, marketstack, ertwro, kryzsec, gra, timothyb, mountainwashere, loshcat, dna-replication, kenadis, lamouthe, jamhuery, nitesh9, sbi2, de-stem, steemnova, gentleshaid, carloserp-2000, the-devil, amavi, churchboy, ovij, arconite, paraalttiredoks, foundation, leczy, borislavzlatanov, revan746, somethingburger, himal, deutsch-boost, alexander.alexis, hadji, sco, rachelsmantra, oleg326756, fishyculture, blessing97, rjbauer85, and 12 others

properties (23)

author

tensor

permlink

making-http-requests-and-using-json-in-dart-s-flutter-framework

category

utopian-io

json_metadata

"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":31792824,"name":"flutter","full_name":"flutter/flutter","html_url":"https://github.com/flutter/flutter","fork":false,"owner":{"login":"flutter"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","steemstem","steemiteducation","technology","science"],"users":["tensor"],"links":["https://www.jetbrains.com/idea/","https://code.visualstudio.com/","https://github.com/flutter/flutter-intellij","https://www.dartlang.org/install","https://flutter.io/get-started/install/","https://swapi.co","https://github.com/Dart-Code/Dart-Code","https://github.com/tensor-programming/Flutter_calling_api","https://steemit.com/@tensor/dart-flutter-cross-platform-chat-application-tutorial","https://utopian.io/u/36304896"],"moderator":{"account":"ewq","time":"2018-03-05T00:48:34.164Z","reviewed":true,"pending":false,"flagged":false},"questions":[{"question":"Is the project description formal?","answers":[{"value":"Yes it’s straight to the point","selected":true,"score":10},{"value":"Need more description ","selected":false,"score":5},{"value":"Not too descriptive","selected":false,"score":0}],"selected":0},{"question":"Is the language / grammar correct?","answers":[{"value":"Yes","selected":true,"score":20},{"value":"A few mistakes","selected":false,"score":10},{"value":"It's pretty bad","selected":false,"score":0}],"selected":0},{"question":"Was the template followed?","answers":[{"value":"Yes","selected":true,"score":10},{"value":"Partially","selected":false,"score":5},{"value":"No","selected":false,"score":0}],"selected":0},{"question":"Is the code included in the contribution post or a GitHub repository for the tutorial files, if used?","answers":[{"value":"Yes, the code is included in the post or a GitHub repository","selected":true,"score":5},{"value":"No","selected":false,"score":0}],"selected":0},{"question":"Does the sound contain audible speaking and/or music in the background. There must be minimal background noise?","answers":[{"value":" No, the sound is clear","selected":true,"score":5},{"value":"Yes, mildly distracting","selected":false,"score":3},{"value":"Yes, distracting","selected":false,"score":0}],"selected":0},{"question":"Presenter must speak clearly and be easily understandable","answers":[{"value":"Yes, understandable speech","selected":true,"score":5},{"value":"Mostly understandable speech","selected":false,"score":3},{"value":"Mostly not understandable speech","selected":false,"score":0}],"selected":0},{"question":"The title of the tutorial and/or the concepts being covered must be present on the video in text form at all times","answers":[{"value":"Title present on the video at all times","selected":true,"score":5},{"value":"Title is not present on the video at all times","selected":false,"score":0}],"selected":0},{"question":"Concepts covered in the tutorial must be indicated in the post text with brief descriptions of each concept. Text and screenshot images are preferred","answers":[{"value":"Thorough text and images for concepts covered","selected":true,"score":5},{"value":"Minimal text and images ","selected":false,"score":3},{"value":"No or very little text and images ","selected":false,"score":0}],"selected":0},{"question":"Tutorials must address a minimum of three substantial concepts and no more than five","answers":[{"value":"3-5 substantial concepts covered in tutorial","selected":true,"score":5},{"value":"Less than 3 or more than 5 substantial concepts covered in tutorial","selected":false,"score":0}],"selected":0},{"question":"Tutorial videos must be clearly prepared and structured","answers":[{"value":"Presenter is well prepared and video concepts are well structured","selected":true,"score":5},{"value":"Presenter has moments when he/she seems unprepared and/or unstructured","selected":false,"score":3},{"value":"Presenter seems unprepared and/video is unstructured","selected":false,"score":0}],"selected":0},{"question":"Contributors must provide a clear text description of all substantial topics covered in a tutorial video","answers":[{"value":"Text describes concepts clearly with a minimum of 150 words","selected":true,"score":5},{"value":"Text does not describe concepts clearly","selected":false,"score":0}],"selected":0}],"score":99}"

created

2018-03-04 23:18:00

last_update

2018-03-05 00:48:33

depth

children

last_payout

2018-03-11 23:18:00

cashout_time

1969-12-31 23:59:59

total_payout_value

21.635 HBD

curator_payout_value

9.078 HBD

pending_payout_value

0.000 HBD

promoted

0.000 HBD

body_length

2,930

author_reputation

87,856,203,149,624

root_title

"Making Http requests and Using Json in Dart's Flutter Framework"

beneficiaries

0.

`account`	utopian.pay
`weight`	2,500

max_accepted_payout

1,000,000.000 HBD

percent_hbd

10,000

post_id

42,235,418

net_rshares

9,357,729,008,995

author_curate_reward

vote details (76)

voter	rshares	pct
pharesim	84,622,938,521	0.02%
mrs.agsexplorer	8,597,589,826	2%
kevinwong	76,151,003,204	1.5%
justtryme90	56,839,116,541	2%
grandpere	10,523,109,057	5%
arconite	579,245,604	0.75%
timsaid	5,158,500,455	1%
lemouth	16,417,495,583	3.75%
rjbauer85	185,644,849	5%
anarchyhasnogods	8,159,948,334	2.5%
lamouthe	1,258,937,223	5%
steemstem	133,273,024,843	5%
oleg326756	201,759,249	0.25%
foundation	485,906,906	5%
the-devil	796,591,084	5%
timothyb	1,728,239,612	2%
thevenusproject	2,705,626,846	5%
dna-replication	1,395,685,807	5%
borislavzlatanov	425,668,996	5%
jamhuery	1,246,828,693	5%
scrooger	85,883,367	0.33%
mobbs	11,385,646,094	4.25%
kryzsec	1,876,824,198	5%
mys	11,631,571,061	25%
fredrikaa	8,792,230,785	2.5%
trumpman	8,042,995,468	5%
dber	2,267,602,208	5%
kerriknox	22,109,655,970	5%
alexander.alexis	278,331,709	1%
blessing97	189,664,920	5%
tensor	11,776,355,941	100%
ertwro	2,079,197,422	5%
nitesh9	1,246,256,757	5%
churchboy	638,184,900	5%
himal	368,509,861	5%
abigail-dantes	75,104,284,979	5%
leczy	483,437,583	5%
ovij	635,917,145	5%
mountain.phil28	2,337,996,967	25%
mountainwashere	1,520,491,876	5%
somethingburger	377,671,868	5%
cifer	3,231,833,953	80%
theleapingkoala	90,298,594	0.25%
fishyculture	200,400,364	0.03%
shawkr13	158,176,220	0.7%
superdavey	104,488,996	0.02%
zeeshan003	93,475,138	5%
qurator	50,463,670,717	1%
loshcat	1,470,224,748	100%
carloserp-2000	808,071,045	5%
pangoli	171,890,252	5%
rachelsmantra	214,559,082	5%
revan746	410,720,249	1%
gra	1,875,349,393	5%
utopian-io	8,694,214,762,941	5.35%
omstavan	2,483,696,659	100%
robertlyon	5,062,799,221	100%
ecoman1	165,455,397	100%
kenadis	1,351,675,536	5%
amavi	761,373,163	1%
robotics101	171,318,897	5%
gentleshaid	849,254,517	5%
sco	222,868,574	1%
luoq	10,263,052,682	100%
paraalttiredoks	493,606,485	100%
hadji	235,386,574	5%
steemstem-bot	2,329,322,830	15%
deutsch-boost	338,943,441	20%
yepes	0	100%
nwjordan	128,631,344	0.75%
marketstack	2,150,275,139	10%
steemnova	872,761,178	25%
mwfiae	88,624,031	0.1%
sbi2	1,244,836,737	1%
de-stem	1,025,632,586	2.5%
cpower	0	100%

@ewq · Mar 5 '18

$1.02

Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**

👍 utopian.tip, treasureteam, tensor

`author`	ewq
`permlink`	re-tensor-making-http-requests-and-using-json-in-dart-s-flutter-framework-20180305t004836613z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-03-05 00:48:39
`last_update`	2018-03-05 00:48:39
`depth`	1
`children`	2
`last_payout`	2018-03-12 00:48:39
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.813 HBD
`curator_payout_value`	0.202 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	172
`author_reputation`	2,798,579,990,254
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,248,519
`net_rshares`	251,163,934,326
`author_curate_reward`	""

properties (23)vote details (3)

voter	rshares	pct
tensor	11,494,320,830	100%
utopian.tip	203,670,634,068	18.03%
treasureteam	35,998,979,428	20%

@tensor · Mar 5 '18

Thank you for moderating my post.

properties (22)

`author`	tensor
`permlink`	re-ewq-re-tensor-making-http-requests-and-using-json-in-dart-s-flutter-framework-20180305t005431687z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-03-05 00:54:30
`last_update`	2018-03-05 00:54:30
`depth`	2
`children`	0
`last_payout`	2018-03-12 00:54:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	33
`author_reputation`	87,856,203,149,624
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,249,359
`net_rshares`	0

@utopian.tip · Mar 5 '18

Hey @ewq, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

properties (22)

`author`	utopian.tip
`permlink`	re-re-tensor-making-http-requests-and-using-json-in-dart-s-flutter-framework-20180305t004836613z-20180305t113059
`category`	utopian-io
`json_metadata`	""
`created`	2018-03-05 11:31:00
`last_update`	2018-03-05 11:31:00
`depth`	2
`children`	0
`last_payout`	2018-03-12 11:31:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	153
`author_reputation`	238,310,597,885
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,356,726
`net_rshares`	0

@five34a4b · Mar 5 '18

making-http-requests-and-using-json-in-dart-s-flutter-framework-comment

I really like this post tensor!

properties (22)

`author`	five34a4b
`permlink`	making-http-requests-and-using-json-in-dart-s-flutter-framework-comment
`category`	utopian-io
`json_metadata`	{}
`created`	2018-03-05 00:32:42
`last_update`	2018-03-05 00:32:42
`depth`	1
`children`	1
`last_payout`	2018-03-12 00:32:42
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	31
`author_reputation`	1,119,681,610,239
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,246,239
`net_rshares`	0

@tensor · Mar 5 '18

I'm glad you enjoyed it.

properties (22)

`author`	tensor
`permlink`	re-five34a4b-making-http-requests-and-using-json-in-dart-s-flutter-framework-comment-20180305t192710433z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-03-05 19:27:09
`last_update`	2018-03-05 19:27:09
`depth`	2
`children`	0
`last_payout`	2018-03-12 19:27:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	24
`author_reputation`	87,856,203,149,624
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,449,109
`net_rshares`	0

@steemstem-bot · Mar 6 '18

$0.57

<center><a href="www.steemit.com/@steemstem"><img src="https://media.discordapp.net/attachments/384404201544876032/405507994583957505/steemSTEM.png"></a><br><table><tr><th> </th><th> </th><th><a href="https://steemit.com/steemstem/@steemstem/helpful-guidelines-for-crafting-steemstem-content">Guidelines</a></th><th><a href="https://steemit.com/steemstem/@steemstem/steemstem-winter-2017-2018-project-update">Project Update</a></th><th> </th><th> </th></tr></table><br><a href="https://steemit.com/steemstem/@steemstem/being-a-member-of-the-steemstem-community"><b>Being A SteemStem Member</b></a></center>

👍 justtryme90

`author`	steemstem-bot
`permlink`	re-making-http-requests-and-using-json-in-dart-s-flutter-framework-20180306t063705
`category`	utopian-io
`json_metadata`	""
`created`	2018-03-06 06:37:06
`last_update`	2018-03-06 06:37:06
`depth`	1
`children`	0
`last_payout`	2018-03-13 06:37:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.574 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	606
`author_reputation`	3,811,533,615,496
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,555,738
`net_rshares`	142,103,710,580
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
justtryme90	0 B		142,103,710,580	5%

@utopian-io · Mar 5 '18

$0.05

### Hey @tensor I am @utopian-io. I have just upvoted you!
#### Achievements
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**

👍 tensor

`author`	utopian-io
`permlink`	re-tensor-making-http-requests-and-using-json-in-dart-s-flutter-framework-20180305t111027932z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-03-05 11:10:33
`last_update`	2018-03-05 11:10:33
`depth`	1
`children`	0
`last_payout`	2018-03-12 11:10:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.041 HBD
`curator_payout_value`	0.012 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,082
`author_reputation`	152,955,367,999,756
`root_title`	"Making Http requests and Using Json in Dart's Flutter Framework"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	42,352,794
`net_rshares`	13,398,520,942
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
tensor	0 B		13,398,520,942	100%