Flutter如何显示api响应的数据

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

Future<String> fetchData() async {
  final response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to load data');
  }
}

import 'dart:convert';

class Data {
  final String name;
  final int age;

  Data({required this.name, required this.age});

  factory Data.fromJson(Map<String, dynamic> json) {
    return Data(
      name: json['name'],
      age: json['age'],
    );
  }
}

Data parseData(String responseBody) {
  final parsed = jsonDecode(responseBody);
  return Data.fromJson(parsed);
}

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  final Future<Data> futureData;

  MyHomePage({Key? key, required this.futureData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('API Response'),
      ),
      body: Center(
        child: FutureBuilder<Data>(
          future: futureData,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Name: ${snapshot.data!.name}\nAge: ${snapshot.data!.age}');
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}