• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • 6 Things About HTTP Request in Dart For Beginners
      6 Things About Http Request In Dart For Beginners Min | 6 Things About Http Request In Dart For Beginners

      6 Things About HTTP Request in Dart For Beginners

      • Posted by Shivam Srivastava
      • Categories Flutter, Dart
      • Date September 7, 2020
      • Comments 0 comment
      Spread the love
      Contents hide
      1 Introduction
      2 What is Rest API in Dart ?
      3 What is Asynchronous Programming in Dart ?
      4 1. What is Future in Flutter
      5 2. How async and await work in Dart?
      6 3. HTTP GET Request in Flutter
      7 4. HTTP POST request in Flutter
      8 5. How to cancel HTTP API Request in Flutter
      9 6. Handling errors
      10 Conclusion
      10.1 Please login to bookmark

      Introduction

      If you are here and a beginner, that means you want to learn everything about making an API request using Dart in Flutter, then you are in the right place for the HTTP tutorial. So without wasting any time, let’s start with this flutter tutorial. We will cover the essential topics required to work with the HTTP request in Dart.

      What is Rest API in Dart ?

      Rest Api Flow

      Rest APIs are a way to fetch data from the internet in flutter or communicate the server from the app and get some essential information from your server to the app. This information can be regarding your app’s data, user’s data, or any data you want to share globally from your app to all of your users. 

      This HTTP request fetches in a unique JSON format, and then the information is fetched from the JSON and put in the UI of the app.

      Every programming language has a way of some internet connectivity i.e, use this rest API developed on the server and fetch data from the internet. To use this request feature, we have to add HTTP package in flutter, add this flutter package add in your project to use the http feature. Add this HTTP package to your pubspec.yaml, and run a command in terminal :

      flutter packages get

      What is Asynchronous Programming in Dart ?

      In Flutter, every operation is runs on a single thread; if some long operations took place, it might block the primary single-thread process, including operations like when the user clicks on a button, some Math calculation, or animation within the app. 

      Future Async Flow

      So it is better to perform some long time taking operations in parallel; this process is called an asynchronous process. So to work with Rest API requests, we have to use Dart asynchronous programming.

      1. What is Future in Flutter

      A Future is an instance of Future<T> that can be used to get the result of asynchronous programming. When you call the Future function, that means to call an API in Flutter, the main execution of the app continues to execute other tasks below this Future function, while that future function that was called will start in asynchronous. 

      The result is returned in 2 States Completed and Uncompleted and will return data in then() or throw error in catch()

      • then() – Completed data, example as shown above when you call a future function, then() returns the final result from the Future<TYPE> of Flutter, here <TYPE> means the data type you want to return from the Future.

      • catchError() –  UnCompleted or error data. When you call a Futurefunction, and the catch() returns an error captured or throw() by the Future of Flutter. This function helps you to do task when you didn’t able to get the data or error occured.

      • whenComplete() – Executes on, either way, weather data was return or error was thrown. Its used when you want to perform something in either case happens.

      2. How async and await work in Dart?

      The async keyword is used to make any function in Dart as an asynchronous process. That means the execution will perform in the background. The await keyword is always be used with the async keyword. Await is used to wait for the execution of an async function until the result is returned. After then execute the next instructions only after getting a result. 

      3. HTTP GET Request in Flutter

      Here is an API request to get a user’s data using GET request, First, we have to make an async function that returns a type of Map in Future<Map>, well the data will be returned in the JSON format we will parse it in Map instance.

      4. HTTP POST request in Flutter

      Here its example of an API request to create a new user using a POST request. Its a async function. In POST request we have to send extra JSON data to the server which is passed in the data parameter of post() function

      5. How to cancel HTTP API Request in Flutter

      There might be a scenario where you want to stop the process of fetching data from the Rest API, while the fetching of API is in progress. So to cancel the Rest API in Dart, we have to use StreamSubscriptions. 

      Note this is not a typical implementation; this scenario is rare and depends upon your use case.

      StreamSubscription, it work is to listen to new data (data in parts) continuously and keep returning that data in its listen() function when you cancel the subscription, the stream subscription cancel http API request in Flutter i.e it will stop receiving data from the Future, and so it will stop sending data in the listen(). Note the request sent before cancel() will still get response, but listen() will not receive data to start your logic.

      6. Handling errors

      If you make an HTTP request in Flutter and throw some error, you can use the catchError() function or try-catch block to get the error and update your logic depending upon that error.

      Conclusion

      These are just basics of HTTP request in dart, most of your work will be handle by these codes. If you have any issues you can comment below or ask me and follow me. Also Subscribe to our Youtube Channel and Newsletter to get latest Flutter and Dart updates

      Bookmark(3)

      Please login to bookmark

      Continue with Google
      +4

      Tag:async await, async function, cancel http API request in flutter, fetch data from the internet, flutter cancel future, flutter get request example, flutter post request example, future of flutter, http tutorial

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      What is Flutter and why you should learn it?
      September 7, 2020

      Next post

      14 Flutter Commands a Developer must know, Cheat Sheet
      January 28, 2021

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now

      We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy