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 or Visual Studio Code with the Dart/Flutter Plugins
- The Dart SDK and the Flutter SDK
- 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, 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
The source code for this project can be found here
Video Tutorial
Curriculum
- Dart Flutter Cross Platform Chat Application Tutorial
- Building a Multi-Page Application with Dart's Flutter Mobile Framework
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you for moderating my post.
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!
Being A SteemStem Member
Hey @tensor I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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
I really like this post tensor!
I'm glad you enjoyed it.