如何在 Futur Builder 快照中使用这种类型的 json

Question

我有这个 json 文件，想在我的 Futur 构建器中使用 AUDUSD 价格

json:

{"price":{"AUDUSD":0.76411,"EURUSD":1.17937,"GBPUSD":1.37923,"USDJPY":109.676},"timestamp":1616951788}

我的未来建设者

 **FutureBuilder(
          future: getData(),
          builder: (buildcontext, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemBuilder: (context, i) {
                  return Container(
                    child: Text(snapshot.data[i][////what should i put here]),**

我的 http 请求：

  **Future getData() async {
var url = 'http://------.com/curen.php';
var response = await http.get(url);
var responsebody = jsonDecode(response.body);
return (responsebody);

}**

Answer 1

根据您在评论中提供的API。

我制作了以下示例，我在其中使用 API，并使用 FutureBuilder 并显示信息。同时创建一个模型以更好地处理这些信息。

示例：

API: https://api.openrates.io/latest

Package use: https://pub.dev/packages/http

1：金钱Class

class Money {
  Money({
    this.base,
    this.rates,
    this.date,
  });

  final String base;
  final Map<String, double> rates;
  final DateTime date;

  factory Money.fromJson(Map<String, dynamic> json) => Money(
        base: json["base"],
        rates: Map.from(json["rates"])
            .map((k, v) => MapEntry<String, double>(k, v.toDouble())),
        date: DateTime.parse(json["date"]),
      );

  Map<String, dynamic> toJson() => {
        "base": base,
        "rates": Map.from(rates).map((k, v) => MapEntry<String, dynamic>(k, v)),
        "date":
            "${date.year.toString().padLeft(4, '0')}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}",
      };
}

2：小部件有状态

import 'dart:convert';

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

class ConsumeApiExample extends StatefulWidget {
  ConsumeApiExample({Key key}) : super(key: key);

  @override
  _ConsumeApiExampleState createState() => _ConsumeApiExampleState();
}

class _ConsumeApiExampleState extends State<ConsumeApiExample> {
  Money money = Money();

  Future<Money> getData() async {
    try {
      final res = await http.get('https://api.openrates.io/latest');

      if (res != null) {
        return Money.fromJson(jsonDecode(res.body));
      }

      return Money();
    } catch (e) {
      throw e;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: FutureBuilder(
            future: getData(),
            builder: (context, AsyncSnapshot<Money> snapshot) {
              if (!snapshot.hasData) return CircularProgressIndicator();
              return Container(
                child: Column(
                  children: [
                    Center(
                      child: Text('Base: ${snapshot.data.base}'),
                    ),
                    SizedBox(height: 20),
                    ListView.builder(
                        shrinkWrap: true,
                        itemCount: snapshot.data.rates.length,
                        itemBuilder: (context, index) {
                          String key =
                              snapshot.data.rates.keys.elementAt(index);
                          double value =
                              snapshot.data.rates.values.elementAt(index);

                          return Center(child: Text('$key - $value'));
                        }),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

确保导入您的包和类，等等

3：结果

如何在 Futur Builder 快照中使用这种类型的 json

how to use this type of json in Futur Builder snapshot

json

future

http

dart

flutter