Flutter Networking Tutorial: Getting Started
- Getting Started
- Some Important Terminology
- What is a Network Request?
- What is a RESTful API?
- HTTP Methods
- Exploring the Project
- Deploying REST Apps
- Making GET Requests
- Creating Data Model Classes
- Understanding the HTTP Client
- Implementing Network Logic
- Building the ListView
- Displaying the Favorite Books List
- Making a POST Request
- Updating the Add Book Screen
- Making a DELETE Request
- Where to Go From Here?
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.
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.
- 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:
flutter packages get in a terminal in the project root directory. This will fetch any missing dependencies.
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.
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:
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
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:
- Unzip the book_api_app.zip file.
- Type this command in your terminal from the root of the
flutter pub get.
- Type this command in your terminal from the root of the
flutter pub global activate aqueduct.
- 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
exportcommand you are given by the previous step. The specific path will be a subdirectory of where your
flutterinstall is located.
- Now, execute the command:
aqueduct servein 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
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.
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.