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

Question

I am using an API call to get some data. And I am calling that method in the init state so that it fetches the data as soon as the widget is added into the tree.
I am using that data in a Text widget, but it shows an error that "The method '[]' was called on null".
Here is the code for your reference:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class Profile extends StatefulWidget {
final String username;
Profile({this.username});
#override
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
var data;
void getData() async {
http.Response response = await http
.get('http://codeforces.com/api/user.info?handles=${widget.username}');
if (response.statusCode == 200) {
data = jsonDecode(response.body);
} else {
print('Something went wrong.');
}
}
#override
void initState() {
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Text('Handle - ${widget.username}'),
Text(data['result'][0]['firstName']), /*This line causes error*/
],
),
),
);
}
}
The question is why the data field is null even though it is being called in the init state and the API call is also successful?
I have marked the line which gives the error using a comment.

Answer 1

I think it could be happen because in the time that the request are being done, your Profile widget was already rendered, and you're not using setState in your getData() function, so, the widget will not render again.
In this case, you can do some changes in your code:
Use a setState in your getData method
void getData() async {
http.Response response = await http
.get('http://codeforces.com/api/user.info?handles=${widget.username}');
if (response.statusCode == 200) {
setState(() {
data = jsonDecode(response.body);
});
} else {
print('Something went wrong.');
}
}
Set a default value to your Text widget
Text(data != null ? data['result'][0]['firstName'] : ''),

Answer 2

not the best and efficient solution but if you just want to show some data like username or email you can do it like this:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(Profile());
class Profile extends StatefulWidget {
final String username;
Profile({this.username});
#override
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
var email;
void getData() async {
http.Response response = await http.get(Uri.parse(
'http://codeforces.com/api/user.info?handles=${widget.username}'));
if (response.statusCode == 200) {
setState(() {
Map<String, dynamic> map = json.decode(response.body);
email = map['result'][0]['email'];
print(email);
});
} else {
print('Something went wrong.');
}
}
#override
void initState() {
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: email == null
? CircularProgressIndicator()
: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Handle - ${widget.username}'),
Text(email),
],
),
),
),
);
}
}
output: