API Integration and HTTP Requests

# CHAPTER 18

API Integration and HTTP Requests #

1. Introduction #

2. Learning Objectives #

• Install the http package from pub.dev.

• Understand asynchronous programming (Future, async, await).

• Execute an HTTP GET request to fetch data from a REST API.

• Execute an HTTP POST request to send data to a server.

• Handle network errors (like 404 Not Found) gracefully in the UI.

3. Asynchronous Programming (The Concept) #

• Future: A promise that data will arrive eventually.

• async: A keyword placed on a function, telling Dart it might take a while.

• await: A keyword telling Dart: *"Pause this specific function until the data arrives, but let the rest of the app keep running!"*

4. Setup and the http Package #

1. 1. Add the package to pubspec.yaml:

1. 2. At the top of your Dart file, import it using an alias (standard practice):

5. Executing a GET Request (Fetching Data) #

// 1. Mark the function as async, returning a Future string
Future<String> fetchJoke() async {
  // 2. Define the URL
  final url = Uri.parse(&#039;https://official-joke-api.appspot.com/random_joke');
  
  try {
    // 3. AWAIT the network request!
    final response = await http.get(url);
    
    // 4. Check the Status Code (200 means OK/Success)
    if (response.statusCode == 200) {
      // Return the raw JSON string text
      return response.body; 
    } else {
      return "Server error: ${response.statusCode}";
    }
  } catch (e) {
    return "Failed to connect to the internet.";
  }
}

6. Executing a POST Request (Sending Data) #

Future<void> loginUser(String email, String password) async {
  final url = Uri.parse(&#039;https://example.com/api/login');
  
  final response = await http.post(
    url,
    body: {
      &#039;email': email,
      &#039;password': password,
    },
  );

  if (response.statusCode == 201) { // 201 means Created/Success
    print("Login successful!");
  } else {
    print("Login failed.");
  }
}

7. Integrating with the UI #

String jokeText = "Press the button to load a joke!";
bool isLoading = false; // Tracks if the network request is running!

void getJoke() async {
  // 1. Show the loading spinner
  setState(() { isLoading = true; }); 
  
  // 2. Wait for the API
  String result = await fetchJoke(); 
  
  // 3. Hide spinner and show text!
  setState(() { 
    isLoading = false;
    jokeText = result;
  });
}

// Inside the build method:
isLoading ? CircularProgressIndicator() : Text(jokeText);

8. Visual Learning: The HTTP Lifecycle #

[ Flutter App ] --(GET request)--> [ Internet ] --(GET request)--> [ Server DB ]
                                                                       |
[ Flutter App ] <--(JSON String)-- [ Internet ] <--(JSON String)-- [ Server DB ]
      |
(setState draws the text on screen!)

9. Common Mistakes #

• Forgetting await: If you write final response = http.get(url); without the await keyword, Dart immediately moves to the next line of code before the server responds. response will be an empty object, your statusCode check will fail, and your app will crash. ALWAYS await network calls!

• Missing Android Permissions: By default, Android blocks apps from accessing the internet! You MUST go into android/app/src/main/AndroidManifest.xml and add <uses-permission android:name="android.permission.INTERNET" />.

10. Best Practices #

• Try/Catch Blocks: The internet is inherently unstable. Users go into tunnels or lose Wi-Fi. Always wrap your HTTP requests inside a try/catch block. If the internet fails, the catch block fires, allowing you to show a friendly "Please check your connection" popup instead of the app freezing.

11. Practice Exercises #

1. 1. What Dart keyword is used to pause the execution of a function until a network request finishes, without freezing the visual UI?

1. 2. What HTTP status code signifies a successful GET request response?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the purpose of async and await in Dart. Why is asynchronous programming mandatory for network operations on mobile devices?

• Q: Walk me through the lifecycle of an HTTP GET request in Flutter. Include URL parsing, the request execution, status code validation, and error handling.

• Q: What is the primary difference between a 200 status code and a 404 status code returned by an HTTP response? How should the UI reflect a 404 error?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #