Flutter Networking Tutorial: Getting Started

In today’s world, smartphones have become the primary source of entertainment, banking, photo/videography and shopping. To do many of the things their users request, from ordering food to booking movie tickets, apps on your smartphone needs Internet access.

If you plan to develop apps that fetch data from the Internet, you’ll need to know how to make network requests and how to handle the responses properly. Throughout this tutorial, you’ll learn how to do just that by building a Flutter app.

Getting Started

You’ll build an app named Favorite Books that will download a list of popular books including details like title, description and author’s name and display it in a ListView. You can add your favorite book to the existing list and the details will upload to the server. You can even delete a book from the list.

While building this app, you’ll learn the following things:

• Locally deploying a RESTful API using the Aqueduct framework.
• Making GET, POST and DELETE requests.
• Using an HTTP client to make the network request.
• Understanding Future, async and await.
• Handling different states like Loading, Success and Error.

To begin, download the starter project using the Download Materials button at the top or bottom of this tutorial. Open it in Visual Studio Code, Android Studio or your favorite editor and build the project. Run it to see the current state of the app:

Some Important Terminology

Before you start coding, take a moment to be sure that you understand the terminology that you’ll see throughout this tutorial.

What is a Network Request?

In simple terms, when you open an app like Whatsapp, Instagram or Twitter on your smartphone, the app tries to fetch the latest data from a remote location, usually called a Server. It then displays that information to the user. A server is a centralized place that stores most user data. The app that you’re using is called the Client.

So a network request is a request for data from a client to a server.

What is a RESTful API?

REST stands for REpresentational State Transfer. It’s an application program interface (API) that uses HTTP requests to get or send data between computers.

Communication between a client and a server mostly happens through RESTful APIs.

The most basic form of a REST API is a URL that the client uses to make a request to the server. Upon receiving a successful request, the server checks the endpoint of the URL, does some processing and sends the requested data or resource back to the client.

HTTP Methods

There are four main HTTP methods that you use in REST APIs. Here’s what each of them does:

• GET: Requests a representation of the specified resource. Requests using GET only retrieve data – they should have no other effect on the data.
• POST: Submits data to the specified resource. You use this method to send data to the server, such as customer information or file uploads.
• DELETE: Deletes the specified resource.
• PUT: Replaces all current representations of the target resource with the uploaded content.

Now that you have some theory under your belt, you can move on to exploring the starter project.

Exploring the Project

Once you’ve run the starter project, it’s time to take a look at the project structure. Start by expanding the lib folder and checking the folders within it. It should look like this:

Here’s what each package inside the lib directory does:

• model: This package consists of data model classes for each type of network response.
• network: This package holds the networking logic of the app.
• ui: Contains different UI screens for the app.

Open pubspec.yaml in the project root, and notice that there is an http package added under dependencies. You will be using the http package created by the official dart team to make HTTP requests:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http: ^0.12.0+3

Deploying REST Apps

Inside the downloadable material’s folder, you’ll find a file named book_api_app.zip. That project serves as the backend/server for your Flutter app for this tutorial. It will handle all the requests coming from your app and provide you with the appropriate response.

The backend project uses the Aqueduct framework, which is an HTTP web server framework for building REST applications written in Dart. You won’t be getting into how to write server-side code using Dart; you will just deploy this project and focus on implementing the networking logic on the frontend, i.e the Flutter app, to communicate with the backend.

To start making HTTP requests to the book_api_app, you need to deploy the app locally on your machine.

Follow the steps to deploy an Aqueduct app locally:

1. Unzip the book_api_app.zip file.
2. Type this command in your terminal from the root of the book_api_app project: flutter pub get.
3. Type this command in your terminal from the root of the book_api_app project: flutter pub global activate aqueduct.
4. The previous step will give you a warning about your path, which you can fix with a command like export PATH="$PATH":"$HOME/bin/flutter/.pub-cache/bin". Run the export command you are given by the previous step. The specific path will be a subdirectory of where your flutter install is located.
5. Now, execute the command: aqueduct serve in the project folder.

You should see something like the following in your terminal:

The base URL for this app after locally deploying the application is http://localhost:8888.

Making GET Requests

The simplest and easiest way to make a GET request is to load the URL with the endpoint as /books on a browser.

Copy http://localhost:8888/books and enter it into your favorite browser. You should see the following output in your browser’s page:

The above image shows the JSON body of a successful GET request. The response body is a list of favorite books. Depending on your browser settings, the JSON may not be formatted quite as nicely as the screenshot.

Now, go back to your terminal. You should see a GET request near the bottom:

Whenever a request is made to the book_api_app app, the app prints out the status code of the response in the terminal.

Next, you’ll make the same GET request, but this time you’ll add the request logic in the app and display it in a Flutter ListView.