Fetch data from the internet

Learn the MVVM architecture pattern and how to build HTTP requests with async/await.

Introduction

The overarching pattern that this tutorial implements is called Model-View-ViewModel or MVVM. MVVM is an architectural pattern used in client apps that separates your app into three layers:

• Model: Handles data operations.
• View: Displays the UI.
• ViewModel: Manages state and connects the two.

The core tenet of MVVM (and many other patterns) is separation of concerns. Managing state in separate classes (outside your UI widgets) makes your code more testable, reusable, and easier to maintain.

A single feature in your app contains each one of the MVVM components. In this tutorial, in addition to Flutter widgets, you'll create ArticleModel, ArticleViewModel, and ArticleView.

Define the Model

The Model is the source-of-truth for your app's data and is responsible for low-level tasks such as making HTTP requests, caching data, or managing system resources such as used by a Flutter plugin. A model doesn't usually need to import Flutter libraries.

Create an empty ArticleModel class in your main.dart file:

class ArticleModel {
  // Properties and methods will be added here.
}

Build the HTTP request

Wikipedia provides a REST API that returns JSON data about articles. For this app, you'll use the endpoint that returns a random article summary.

https://en.wikipedia.org/api/rest_v1/page/random/summary

Add a method to fetch a random Wikipedia article summary:

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);

    // TODO: Add error handling and JSON parsing.
    throw UnimplementedError();
  }
}

Use the async and await keywords to handle asynchronous operations. The async keyword marks a method as asynchronous, and await waits for expressions that return a Future.

The Uri.https constructor safely builds URLs by handling encoding and formatting. This approach is more reliable than string concatenation, especially when dealing with special characters or query parameters.

Handle network errors

Always handle errors when making HTTP requests. A status code of 200 indicates success, while other codes indicate errors. If the status code isn't 200, the model throws an error for the UI to display to users.

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);

    if (response.statusCode != 200) {
      throw const HttpException('Failed to update resource');
    }

    // TODO: Parse JSON and return Summary.
    throw UnimplementedError();
  }
}

Parse JSON from Wikipedia

The Wikipedia API returns JSON data that you decode into a Summary class Complete the getRandomArticleSummary method:

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);

    if (response.statusCode != 200) {
      throw const HttpException('Failed to update resource');
    }

    return Summary.fromJson(jsonDecode(response.body) as Map<String, Object?>);
  }
}

The Summary class is defined in summary.dart. If you're unfamiliar with JSON parsing, check out the Getting started with Dart tutorial.

Review

Test yourself