Networking and data

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.

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:

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.

• Tutorial: Fetch data from the internet
• Tutorial: Make authenticated requests
• Article: MDN's article on Authorization for websites

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.

• YouTube video: Freezed (Package of the Week)
• Codelab: Dive into Dart's patterns and records

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.

• Tutorial: Send data to the internet
• Tutorial: Asynchronous programming: futures, async, await
• YouTube video: FutureBuilder (Widget of the Week)
• Article: Using the Network View

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.

• Codelab: Adaptive apps in Flutter
• Video: Keeping it local: Managing a Flutter app's data
• Article series: Basic and advanced networking in Dart and Flutter

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

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-10-02。 查看文档源码 或者 为本页面内容提出建议。