数据在此天气应用程序中保持颤振"loading"，但温度已加载

Question

我做了这个简单的天气应用程序，但是温度加载，没有其他数据正在加载。这是我学校的作业。

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:weather/home.dart';
void main()=>runApp(
MaterialApp(
title: "Weather App",
home: Home()
)
);
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
var temp;
var description;
var currently;
var humidity;
var windSpeed;
late TextEditingController location= TextEditingController();
Future getWeather() async{
http.Response response= await http.get(Uri.parse("https://api.openweathermap.org/data/2.5/weather?q=Cuttack&units=metric&appid=5e749d88f2df02cacc9be6abf8088531"));
var results=jsonDecode(response.body);
print(results);
setState(() {
this.temp=results['main']['temp'];
this.description=results['weather'][2]['description'];
this.currently=results['weather'][0]['main'];
this.humidity=results['main']['humidity'];
this.windSpeed=results['wind']['speed'];
});
}
@override
void initState(){
super.initState();
this.getWeather();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
color: Colors.red,
height: MediaQuery.of(context).size.height/3,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(bottom: 10),
child: Text(
"Currently in Boston",
style:TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
)
),
),
Text(
temp!=null?temp.toString()+"u0000":"Loading",
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.w600
),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
child: Text(
currently!=null?currently:"Loading",
style:TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
)
),
),
],
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(20),
child: ListView(
children: [
ListTile(
leading: FaIcon(FontAwesomeIcons.temperatureHalf),
title: Text("Temperature"),
trailing: Text(temp!=null?temp.toString()+"u0080":"Loading"),
),
ListTile(
leading: FaIcon(FontAwesomeIcons.cloud),
title: Text("Weather"),
trailing: Text(description!=null?description.toString():"Loading"),
),
ListTile(
leading: FaIcon(FontAwesomeIcons.sun),
title: Text("Humidity"),
trailing: Text(humidity!=null?humidity.toString():"Loading"),
),
ListTile(
leading: FaIcon(FontAwesomeIcons.wind),
title: Text("Wind Speed"),
trailing: Text(windSpeed!=null?windSpeed.toString():"Loading"),
),
],
),
),
)
],
),
);
}
}

它只返回温度，但描述和所有其他方面似乎只是不断加载，但是当我使用print时，它显示所有数据，但为什么不在应用程序中加载。

Answer 1

JSON

{
...
"weather": [{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03n"
}],
...
"main": {
"temp": 29.1,
"feels_like": 35.25,
"temp_min": 29.1,
"temp_max": 29.1,
"pressure": 1003,
"humidity": 81,
"sea_level": 1003,
"grnd_level": 1000
},
...
"wind": {
"speed": 6.42,
"deg": 193,
"gust": 12.11
},
...
}

映射到状态，['weather'][2]['description']索引错误。

setState(() {
this.temp=results['main']['temp'];
this.description=results['weather'][0]['description'];
this.currently=results['weather'][0]['main'];
this.humidity=results['main']['humidity'];
this.windSpeed=results['wind']['speed'];
});