Flutter – 从互联网获取数据

在移动应用程序开发的过程中，经常需要从互联网获取数据。Flutter 是一种优秀的跨平台应用程序框架，提供了许多工具和库来实现这一目标。本文将介绍如何在 Flutter 中从互联网获取数据。

获取数据

Flutter 提供了一个 HTTP 库，可以方便地发起 HTTP 请求并获取响应数据。下面是一个示例代码片段：

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

Future<String> getData() async {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  var response = await http.get(url);
  return response.body;
}

这个函数使用了 http 库中的 get 方法，从指定的 URL 中获取数据，并将响应主体返回。请注意，await 关键字在调用 http.get 方法之前使用，以确保仅在响应返回时继续执行。

解析数据

通常，从互联网获取的数据是 JSON 格式的。Flutter 提供了一个 dart:convert 库，可以将 JSON 数据解码为 Dart 对象。下面是一个示例代码片段：

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

class Todo {
  final int id;
  final String title;

  Todo({this.id, this.title});

  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      id: json['id'],
      title: json['title'],
    );
  }
}

Future<Todo> fetchTodo() async {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  var response = await http.get(url);

  if (response.statusCode == 200) {
    var json = jsonDecode(response.body);
    return Todo.fromJson(json);
  } else {
    throw Exception('Failed to load todo');
  }
}

这个示例代码片段还定义了一个 Todo 类，用于封装从 JSON 中解析出的数据。注意，Todo 类实现了一个 fromJson 工厂方法，该方法将 JSON 数据转换为 Todo 对象。

更新 UI

在获得数据后，通常需要更新应用程序的用户界面。由于 Flutter 是响应式框架，可以使用 setState 方法更新小部件的状态。下面是一个示例代码片段：

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<Todo> futureTodo;

  @override
  void initState() {
    super.initState();
    futureTodo = fetchTodo();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Todo'),
        ),
        body: Center(
          child: FutureBuilder<Todo>(
            future: futureTodo,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.title);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

class Todo {
  final int id;
  final String title;

  Todo({this.id, this.title});

  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      id: json['id'],
      title: json['title'],
    );
  }
}

Future<Todo> fetchTodo() async {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  var response = await http.get(url);

  if (response.statusCode == 200) {
    var json = jsonDecode(response.body);
    return Todo.fromJson(json);
  } else {
    throw Exception('Failed to load todo');
  }
}

void main() => runApp(MyApp());

这个示例代码片段还定义了一个响应用户界面的 MyApp 类。这个 MyApp 类使用了 FutureBuilder 小部件来构建用户界面。FutureBuilder 小部件会自动更新界面，以显示异步任务的状态。当 fetchTodo 函数返回数据时，FutureBuilder 小部件会将数据渲染到用户界面上。

总结

本文介绍了如何在 Flutter 中从互联网获取数据。首先使用了 http 库来发起 HTTP 请求。其次使用了 dart:convert 库来解码 JSON 数据，并将其转换为 Dart 对象。最后，演示了如何使用响应式框架更新 Flutter 应用程序的用户界面。