🌐 Lesson 11: Fetch Live Data

⏱ 35-45 min 📊 Advanced 📖 In-depth tutorial 🔗 Official Source

The Complete Data Pipeline: Internet → Your App

🧠 Your CLI app can talk to the entire internet using HTTP requests

With the package:http package, Dart can send HTTP requests to any REST API, receive JSON responses, and integrate live data into your application. The official tutorial uses the Wikipedia API as a real-world example.

💻 Your Dart App

→

📡 HTTP GET
package:http

→

🌍 Wikipedia API

→

📥 JSON Response

→

🏗️ jsonDecode()
+ Model Class

HTTP Requests with package:http

🧠 The http package provides simple functions for all HTTP methods

Add package:http to your pubspec.yaml dependencies. Then use http.get(), http.post(), http.put(), or http.delete() to make requests. Each returns a Future<Response>.

Setting Up

# pubspec.yaml
dependencies:
  http: ^1.3.0

Making a GET Request — Line by Line

// 1. Import the http package
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchData() async {
  // 2. Build the URL using Uri.parse()
  final url = Uri.parse(
    'https://api.example.com/data'
  );
  
  // 3. Send the GET request (returns Future<Response>)
  final response = await http.get(url);
  
  // 4. Check if the request succeeded
  if (response.statusCode == 200) {
    // 5. Decode the JSON body
    final data = jsonDecode(response.body);
    print(data);
  } else {
    // 6. Handle failure
    print('Request failed: \${response.statusCode}');
  }
}

📝 Breakdown

1 Import with as http for clarity

2 Also import dart:convert for jsonDecode

4 Function must be async — network is async

6 Uri.parse() creates a valid URI object

11 await pauses until response arrives

14 Always check statusCode first!

16 jsonDecode converts body to Map/List

19 Handle non-200 responses gracefully

📌 The Response object contains: statusCode (int), body (String), headers (Map), and isRedirect (bool). Always check statusCode before using body.

The Official Tutorial — Fetching from Wikipedia

📖 This complete example comes directly from the official Dart fetch-data tutorial

The official tutorial demonstrates fetching live data from Wikipedia's REST API. Below is the complete example with explanations.

🧠 The Wikipedia REST API provides article summaries at a simple URL pattern

The URL pattern is: https://en.wikipedia.org/api/rest_v1/page/summary/ARTICLE_TITLE. You replace ARTICLE_TITLE with the Wikipedia page title (spaces become underscores).

The Complete Wikipedia Fetch Example (from the official tutorial)

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> main() async {
  // The Wikipedia page we want
  final title = 'Dart_(programming_language)';
  
  // Build the API URL
  final url = Uri.parse(
    'https://en.wikipedia.org/api/rest_v1/page/summary/\$title'
  );
  
  // Make the HTTP GET request
  final response = await http.get(url);
  
  // Check if successful
  if (response.statusCode == 200) {
    // Parse the JSON response
    final data = jsonDecode(response.body);
    
    // Extract and display the title and extract
    print('📄 \${data['title']}');
    print('\${data['extract']}');
  } else {
    print('Failed to load article: \${response.statusCode}');
  }
}

📝 What This Code Does

1-2 Import http and dart:convert

4 main() async — entry point is async

6 Wikipedia article title (underscores for spaces)

9-11 Construct the REST API URL

9 Uri.parse() validates and creates URI

14 await http.get(url) — the actual network call

17 Check for HTTP 200 (success)

19 jsonDecode(response.body) parses JSON

22-23 Access data['title'] and data['extract']

What the Wikipedia API Returns

{
  "title": "Dart (programming language)",
  "displaytitle": "Dart",
  "pageid": 33033735,
  "extract": "Dart is a programming language developed by Google...",
  "extract_html": "<p>Dart is a programming language...</p>",
  "thumbnail": {
    "source": "https://upload.wikimedia.org/...",
    "width": 320
  },
  "content_urls": {
    "desktop": {
      "page": "https://en.wikipedia.org/wiki/Dart_(programming_language)"
    }
  }
}

🔑 Key Fields in the Response: title (the article title), extract (a plain-text summary of the article — perfect for CLI display), and content_urls.desktop.page (link to the full article).

🧪 Simulate: Fetch a Wikipedia Article

Enter an article title and click Fetch...

Understanding HTTP Status Codes

🧠 Every HTTP response includes a 3-digit status code that tells you what happened

Codes are grouped by the first digit: 2xx = success, 3xx = redirect, 4xx = client error (your fault), 5xx = server error (their fault). Always check the status code before processing the response body.

✅ 2xx — Success

Your request worked.

200 OK 201 Created

response.statusCode == 200

🔄 3xx — Redirect

Resource moved elsewhere.

301 Moved

http package follows redirects automatically

❌ 4xx — Client Error

You made a mistake.

400 Bad Request 404 Not Found 429 Rate Limited

Check your URL and parameters

💥 5xx — Server Error

The server broke.

500 Internal Error 503 Unavailable

Retry later with backoff

Click a status code to see handling code...

Error Handling & Retry Logic

🧠 Network requests can fail in many ways. Your app needs to handle them all.

Network errors (no connection), timeouts, rate limiting, and server errors all require different handling strategies. The most robust approach is retry with exponential backoff.

Common Network Errors and How to Handle Them

try {
  final response = await http.get(url)
      .timeout(Duration(seconds: 10));
  
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else if (response.statusCode == 404) {
    throw NotFoundException('Article not found');
  } else if (response.statusCode == 429) {
    print('Rate limited — waiting before retry');
    await Future.delayed(Duration(seconds: 60));
    return fetchData(); // Retry after waiting
  } else {
    throw HttpException('Server error: \${response.statusCode}');
  }
} on TimeoutException {
  print('Request timed out — check your connection');
} on SocketException {
  print('No internet connection');
}

Retry with Exponential Backoff

Future<T> fetchWithRetry<T>(
  Future<T> Function() request,
  {int maxRetries = 3}
) async {
  for (int attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await request()
          .timeout(Duration(seconds: 10));
    } catch (e) {
      if (attempt == maxRetries) rethrow;
      // Wait longer each attempt: 2s, 4s, 8s
      final delay = Duration(seconds: 2 * attempt);
      await Future.delayed(delay);
      print('Retry \$attempt/\$maxRetries after \${delay.inSeconds}s');
    }
  }
}

📝 How It Works

1-5 Generic function — works with any return type

7 Loop for each retry attempt

9 try the request with a timeout

12 On failure, check if this was the last try

12 rethrow on final attempt — gives up

14 Exponential: 2×1=2s, 2×2=4s, 2×3=6s

15 Wait before retrying

🧪 Simulate Network Scenarios

Select a scenario to see how it's handled...

Putting It All Together — A Complete Wikipedia Client

🧠 Combining HTTP requests, JSON parsing, status code handling, and retry logic into a reusable function

import 'dart:convert';
import 'package:http/http.dart' as http;

class WikipediaClient {
  static const _baseUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
  
  /// Fetches a Wikipedia article summary
  Future<Map<String, dynamic>> fetchArticle(String title) async {
    final url = Uri.parse('\$_baseUrl\$title');
    
    try {
      final response = await http.get(url)
          .timeout(Duration(seconds: 10));
      
      return switch (response.statusCode) {
        200 => jsonDecode(response.body),
        404 => throw Exception('Article not found: \$title'),
        _ => throw HttpException('HTTP \${response.statusCode}'),
      };
    } on TimeoutException {
      throw Exception('Request timed out');
    } on SocketException {
      throw Exception('No internet connection');
    }
  }
}

// Usage in main()
Future<void> main() async {
  final client = WikipediaClient();
  try {
    final article = await client.fetchArticle('Dart_(programming_language)');
    print('📄 \${article['title']}');
    print(article['extract']);
  } catch (e) {
    print('❌ Error: \$e');
  }
}

🎯 Fetch Data Quiz

Score: 0/5 | Hints: 3

Loading question...

🚀

Practice Projects

Apply what you've learned by building these hands-on projects.

📦 Project 1 📦 Project 2