Skip to main content
Contents

Networking and data

Contents

While it's said that "no man is an island", a Flutter app without any networking capability can feel a tad disconnected. This page covers how to add networking features to your Flutter app. Your app will retrieve data, parse JSON into usable in memory representations, and then send data out again.

Introduction to retrieving data over the network

#

At it's simplest, assuming you utilize the http package to adapt to the differences between network access from Dart VM based platforms and web browser-based environments, making a HTTP GET request can be as simple as the following:

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

void main() async {
  var response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
  );
  print(response.body);
}

The following two tutorials show you all of the details involved in adding the http package to your app, whether you are running on Android, iOS, inside a web browser, or natively on Windows, macOS, or Linux. The first tutorial shows you how to make an unauthenticated GET request to a website, parse the retrieved data as JSON and then display the resulting data. The second tutorial builds on the first by adding authentication headers, enabling access to web servers requiring authorization. The article by the Mozilla Developer Network (MDN) gives more background on how authorization works on the web.

Making data retrieved from the network useful

#

Once you retrieve data from the network, you need a way to convert the data from the network into something that you can easily work with in Dart. The tutorials in the previous section used hand rolled Dart to convert network data into an in-memory representation. In this section, you'll see other options for handling this conversion. The first links to a YouTube video showing an overview of the freezed package. The second links to a codelab that covers patterns and records using a case study of parsing JSON.

Going both ways, getting data out again

#

Now that you've mastered the art of retrieving data, it's time to look at pushing data out. This information starts with sending data to the network, but then dives into asynchronicity. The truth is, once you are in a conversation over the network, you'll need to deal with the fact that web servers that are physically far away can take a while to respond, and you can't stop rendering to the screen while you wait for packets to round trip. Dart has great support for asynchronicity, as does Flutter. You'll learn all about Dart's support in a tutorial, then see Flutter's capability covered in a Widget of the Week video. Once you complete that, you'll learn how to debug network traffic using DevTool's Network View.

Extension material

#

Now that you've mastered using Flutter's networking APIs, it helps to see Flutter's network usage in context. The first codelab (ostensibly on creating Adaptive apps in Flutter), uses a web server written in Dart to work around the web browsers' Cross-Origin Resource Sharing (CORS) restrictions.

Next, a long-form YouTube video where Flutter DevRel alumnus, Fitz, talks about how the location of data matters for Flutter apps. Finally, a really useful series of articles by Flutter GDE Anna (Domashych) Leushchenko covering advanced networking in Flutter.

Feedback

#

As this section of the website is evolving, we welcome your feedback!

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-09-25. View source or report an issue.