如何在FutureBuilder中呈现来自请求的数据

FutureBuilder 是 Flutter 框架中的一个非常有用的组件，它允许开发者根据异步操作（通常是网络请求）的结果来构建 UI。以下是如何在 FutureBuilder 中呈现来自请求的数据的基础概念和相关步骤：

基础概念

Future: 在 Dart 中，Future 表示一个可能还没有完成的异步操作的结果。
FutureBuilder: 是一个可以根据 Future 的状态（等待中、成功、失败）来构建不同 UI 的 Widget。

类型

等待状态: 当 Future 还没有完成时的 UI。
成功状态: 当 Future 成功返回数据时的 UI。
失败状态: 当 Future 抛出异常时的 UI。

应用场景

网络请求: 如从 API 获取数据并在 UI 中显示。
文件读写: 如读取本地文件并在 UI 中展示内容。
数据库查询: 如从数据库获取数据并更新 UI。

示例代码

假设我们有一个简单的 API 请求，我们将使用 FutureBuilder 来显示结果：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FutureBuilder Example')),
        body: FutureBuilderExample(),
      ),
    );
  }
}

class FutureBuilderExample extends StatelessWidget {
  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      return jsonDecode(response.body)['title'];
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(),
      builder: (context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          return Center(child: Text('Title: ${snapshot.data}'));
        } else {
          return Center(child: Text('No data found'));
        }
      },
    );
  }
}