The method '[ ]' was called on null when calling api - flutter

Question

i want to get data from open weather api, and i keep getting this:
NoSuchMethodError: The method '[]' was called on null.Reciever: null
tried calling:
is it a problem with the api or the code?the editor don't show any errors please help
my code:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MaterialApp(
title: 'Weather',
home: Weather(),
));
}
String api_key = 'the key';
Future<List> fetchData() async {
var result = await http.get(Uri.http('http://api.openweathermap.org',
'weather?lat=15.53804515&lon=32.52674103&appid=$api_key&units=metric'));
return json.decode(result.body);
}
class Weather extends StatefulWidget {
#override
_WeatherState createState() => _WeatherState();
}
class _WeatherState extends State<Weather> {
Color bgcolor;
var data;
#override
void initState() {
super.initState();
fetchData().then((value) {
setState() {
data = value;
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text('Weather App'),
centerTitle: true,
),
body: Center(
child: Column(children: [
Text(data['main']['temp']),
Text(data['weather']['description']),
Text(data['name'])
]),
));
}
}

Answer 1

fetchData is asynchronous, meaning it will take some time to execute and fetch that weather data. Until then, the variable "data" is uninitialized and thus null. Try adding a check for if data is null, then return a loading page or CircularProgressIndicator.

Answer 2

Just add a simple null check -
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MaterialApp(
title: 'Weather',
home: Weather(),
));
}
String api_key = 'the key';
Future<List> fetchData() async {
var result = await http.get(Uri.http('http://api.openweathermap.org',
'weather?lat=15.53804515&lon=32.52674103&appid=$api_key&units=metric'));
return json.decode(result.body);
}
class Weather extends StatefulWidget {
#override
_WeatherState createState() => _WeatherState();
}
class _WeatherState extends State<Weather> {
Color bgcolor;
var data;
#override
void initState() {
super.initState();
fetchData().then((value) {
setState() {
data = value;
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text('Weather App'),
centerTitle: true,
),
body: Center(
child: data == null
? CircularProgressIndicator()
: Column(children: [
Text(data['main']['temp']),
Text(data['weather']['description']),
Text(data['name'])
]),
));
}
}