Chapters
Chapters

Chapters

Hide chapters

Flutter Apprentice

Fourth Edition · Flutter 3.16.9 · Dart 3.2.6 · Android Studio 2023.1.1

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Build Your First Flutter App

Section 1: 2 chapters
Show chapters Hide chapters

Section II: Everything’s a Widget

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Navigating Between Screens

Section 3: 2 chapters
Show chapters Hide chapters

Section IV: Networking, Persistence & State

Section 4: 6 chapters
Show chapters Hide chapters

Section V: Working With Firebase Cloud Firestore

Section 5: 1 chapter
Show chapters Hide chapters

Section VI: Testing Your Flutter App

Section 6: 2 chapters
Show chapters Hide chapters

Section VII: Deployment

Section 7: 4 chapters
Show chapters Hide chapters

12. Networking in Flutter
Written by Kevin D Moore

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Loading data from the network to show it in a UI is a very common task for apps. In the previous chapter, you learned how to serialize JSON data. Now, you’ll continue the project to learn about retrieving JSON data from the network.

Note: You can also start fresh by opening this chapter’s starter project. If you choose to do this, remember to click the pub get button or execute flutter pub get from Terminal.

By the end of this chapter, you’ll know how to:

  • Sign up for a recipe API service.
  • Trigger a search for recipes by name.
  • Convert data returned by the API to model classes.
  • Display recipes in the current UI.

Without further ado, it’s time to get started!

Signing Up With the Recipe API

For your remote content, you’ll use the Spoonacular Food API. Open this link in your browser: https://spoonacular.com/food-api.

Click the Start Now button in the top right to create an account.

Fill in an email and password, then click the checkbox and sign up. Go through the steps to finish the process. You can choose the free tier.

Click Sign Up, and you should see this:

Once you’ve confirmed your email, visit https://spoonacular.com/food-api/console and log in.

You should see your Console. Once you start making requests, you’ll see the graph fill up.

Now go to docs and click Full Documentation:

Here, you can see the docs for searching for recipes:

If you scroll down, you can see a lot of fields returned. We’re not interested in most of these fields.

You’ll see a complete API URL and a list of the parameters available for the GET request you’ll make.

There’s much more API information on this page than you’ll need for your app, so you might want to bookmark it for the future.

Click My Console, then the Profile section and you’ll end up on this link https://spoonacular.com/food-api/console#Profile:

Click Show/Hide API key. Copy the API Key and save it in a secure place.

For your next step, you’ll use your newly created API key to fetch recipes via HTTP requests.

Note: The free developer version of the API is rate-limited. If you use the API a lot, you’ll probably receive some JSON responses with errors and emails warning you about the limit.

Preparing the Pubspec File

Open either your project or the chapter’s starter project. To use the http package for this app, you need to add it to pubspec.yaml, so open that file and add the following after the json_annotation package:

Using the HTTP package

The package contains only a few files and methods that you’ll use in this chapter. The REST protocol has methods such as:

Connecting to the Recipe Service

To fetch data from the recipe API, you’ll create a Dart class to manage the connection. Such a class file will contain your API Key and URL.

Updating the User Interface

Open main.dart and add the following:

Retrieving Recipe Data

Great, it’s time to try out the app!

Why Chopper?

Chopper is a library that streamlines the process of writing code that performs HTTP requests. For example:

Preparing to use Chopper

To use Chopper, you need to add the package to pubspec.yaml. To log network calls, you also need the logging package, which is already included in the project.

Handling Recipe Results

In this scenario, creating a generic response class that holds either a successful response or an error is good practice. While these classes aren’t required, they make it easier to deal with the responses that the server returns.

Preparing the Recipe Service

Open spoonacular_service.dart.

Setting Up the Chopper Client

Your next step is to update the queries needed to implement the service. Replace the definitions of queryRecipes() and queryRecipe() with:

Converting Request and Response

To use the returned API data, you need a converter to transform requests and responses. To attach a converter to a Chopper client, you need an interceptor. You can think of an interceptor as a function that runs every time you send a request or receive a response. It’s a sort of hook to which you can attach functionalities, like converting or decorating data, before passing such data along.

Encoding and Decoding JSON

To make it easy to expand your app in the future, you’ll separate encoding and decoding. This gives you flexibility if you need to use them separately later.

Encoding JSON

To encode the request in JSON format, replace // TODO encode JSON with the following:

Decoding JSON

Now, it’s time to add the functionality to decode JSON. A server response is usually a String, so you’ll have to parse the JSON string and transform it into the corresponding model class.

Using Interceptors

As mentioned earlier, interceptors can intercept either the request, the response or both. In a request interceptor, you can add headers or handle authentication. In a response interceptor, you can manipulate a response and transform it into another type, as you’ll see shortly. You’ll start with decorating the request.

Automatically Including Your API Key

To request any recipes, the API needs your api_key. Instead of adding this field manually to each query, you can use an interceptor to add this to each call.

Wiring Up Interceptors and Converters

It’s time to create an instance of the service that will fetch recipes.

Generating the Chopper File

Your next step is to generate spoonacular_service.chopper.dart, which works with the part keyword. Remember from Chapter 11, “Serialization With JSON”, part will include the specified file and make it part of one big file.

Using the Chopper Client

Open main.dart and after sharedPrefs, replace:

Updating the UI

Now open lib/ui/recipe_details.dart. In loadRecipe(), replace:

Key Points

  • The http package is a simple-to-use set of methods for retrieving data from the internet.
  • The built-in json.decode() transforms JSON strings into a map of objects that you can use in your code.
  • The Chopper package provides easy ways to retrieve data from the internet.
  • You can add headers to each network request.
  • Interceptors can intercept both requests and responses and change those values.
  • Converters can modify requests and responses.

Where to Go From Here?

You’ve learned how to retrieve data from the internet and parse it into data models. If you want to learn more about the HTTP package and get the latest version, go to https://pub.dev/packages/http.

11. Serialization With JSON
13. Managing State
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now