values are null after calling network data - flutter

Question

I am beginner in Flutter, I tried to call network data, but I used a parameter that comes from shared preferences in my function that calls the api data, and I put my function in initState but after I execute I find that the data are null, while there is data that came from internet call,
I am confused about the reason that made my data null, I mean here clubName, and points and fixture etc ...
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:footyappp/Fantazyy/club_json.dart';
import 'package:footyappp/Fantazyy/club_edit.dart';
import 'package:footyappp/Fantazyy/player_update_view.dart';
import 'package:footyappp/Fantazyy/styles.dart';
import 'package:footyappp/Fantazyy/player%20copy.dart';
import 'package:footyappp/Fantazyy/players_creation_details_view.dart';
import 'package:footyappp/Fantazyy/team_display_view.dart';
import 'package:footyappp/Key/Key.dart';
import 'package:http/http.dart';
import 'package:shared_preferences/shared_preferences.dart';
class TeamDisplayView extends StatefulWidget {
List<Playerr> selectedPlayers;
TeamDisplayView({
Key key,
players,
selectedPlayers,
}) : selectedPlayers = (selectedPlayers == null) ? new List<Playerr>.generate(16, (int index) => null) : selectedPlayers;
#override
_TeamDisplayViewState createState() => _TeamDisplayViewState();
}
class _TeamDisplayViewState extends State<TeamDisplayView> {
getClubId() async{
SharedPreferences prefs = await SharedPreferences.getInstance();
int clubid= prefs.getInt("clubID");
print(clubid);
makePostRequest(clubid);
}
Future<void> makePostRequest(int clubid) async {
// set up POST request arguments
String url = '${ApiKey.url}/api/questions/getclub';
Map<String, String> headers = {"Content-type": "application/json"};
String json = '{"clubid": "' + clubid.toString() + '}';
Response response = await post(url, headers: headers, body: json);
String res = response.body;
Map parsed = jsonDecode(res);
ClubEdit club = ClubEdit.fromJson(parsed);
setState((){
clubName=club.data.name;
budget=club.data.price;
points=club.data.points;
fixture=club.data.fixture;
});
print(clubName);
print(budget);
print(points);
print(fixture);
if((res != "Invalid email")||(res != "Invalid password")){
Fluttertoast.showToast(
msg: "login success",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.green,
textColor: Colors.white,
fontSize: 16.0
);
}
else{
Fluttertoast.showToast(
msg: "Login failed",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
}
}
updateRequest(int userid, String email, int points,String fixtures,String password,String name, double price, List<Playerr> players) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
email=prefs.getString("userEmail");
password=prefs.getString("userPassword");
setState((){
userid=prefs.getInt("userID");
});
// set up POST request arguments
final url = Uri.parse('${ApiKey.url}/api/questions/updateQuestion');
Map<String, String> headers = {"Content-type": "application/json"};
List<Player> pl = [];
for(var item in players){
pl.add(Player(id:item.playerID,firstname:item.firstName.toString(),lastname:item.lastName.toString(),position:item.position.toString(),price:item.price,appearences:item.appearances,goals:item.goals,assists:item.assists,cleansheets:item.cleanSheets,redcards:item.redCards,yellowcards:item.yellowCards,image:item.image));
}
ClubJson club = ClubJson(userid: userid, email: email, password: password, name: name, price: price, players: pl );
var json = jsonEncode(club.toJson());
print(club.name);
print(club.name);
print(club.price);
for(var item in club.players){
print(item.price);
}
// make POST request
Response response = await post(url, headers: headers, body: json);
// check the status code for the result
int statusCode = response.statusCode;
// this API passes back the id of the new item added to the body
String body = response.body;
// var res = jsonDecode(response.body);
// if(res == "success"){
//
//Navigator.push(context, MaterialPageRoute(builder: (context)=>BodyFantasy(),),);
return response;
}
int clubid;
String clubName;
double budget;
int points;
String fixture;
double _budget = 150.0;
String _teamName = "";
Widget _saveChanges = Text("Press to save changes");
int userid;
String email;
String password;
#override
void initState() {
Map<int,int> teamCount = new Map<int, int>();
for (Playerr player in widget.selectedPlayers) {
if (player != null) {
_budget -= player.price;
}
}
super.initState();
this.getClubId();
}
emptyPlayer(int index) {
Playerr player = widget.selectedPlayers[index];
Widget playerView;
if (player == null) {
playerView = Image.asset("Assets/shirt_blank.png", fit: BoxFit.fitHeight,);
} else {
playerView = Column(
children: <Widget>[
Expanded(
child: Image.asset(player.image, fit: BoxFit.fitHeight,),
),
Container(
color: Colors.black,
child: Text(player.firstName.substring(0,1) + ". " + player.lastName, textAlign: TextAlign.center, softWrap: false, overflow: TextOverflow.fade,),
),
Container(
color: Colors.black,
child: Text("£${player.price}m", textAlign: TextAlign.center),
),
],
);
}
return Expanded(
child: InkWell(
onTap: () => Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) {return PlayerUpdateView(selectedPlayers: widget.selectedPlayers, playerIndex: index,);})),
child: Padding(padding: EdgeInsets.only(left: 3.0, right: 3.0), child:playerView,)
),
);
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Scaffold(
appBar: AppBar(title: Text("Your team"),),
body: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Positioned.fill(
child: Image.asset("Assets/pitch.jpg", fit: BoxFit.fitWidth, alignment: Alignment.topLeft,)
)
]
)
),
],
),
Column( //players
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Container()
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.only(left: 40.0, right: 40.0), child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(2, (index) => emptyPlayer(index)),
),
)
),
Expanded(
flex: 1,
child: Container()
),
Expanded(
flex: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(5, (index) => emptyPlayer(index+2)),
)
),
Expanded(
flex: 1,
child: Container()
),
Expanded(
flex: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(5, (index) => emptyPlayer(index+7)),
)
),
Expanded(
flex: 1,
child: Container()
),
Expanded(
flex: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: List.generate(4, (index) => emptyPlayer(index+12)),
)
),
Expanded(
flex: 1,
child: Container()
),
Container(
color: Styles.colorAccentDark,
padding: EdgeInsets.only(left: 8.0, right: 8.0),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Row(
children: <Widget>[
Expanded(
child: Text("Team Name", style: Styles.budgetLabel,),
),
Text("${clubName}", style: Styles.budgetLabel,)
],
),
),
Padding(
padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Row(
children: <Widget>[
Expanded(
child: Text("Fixture", style: Styles.budgetLabel,),
),
Text("${fixture}", style: Styles.budgetLabel,)
],
),
),
Padding(
padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Row(
children: <Widget>[
Expanded(
child: Text("Remaining Budget", style: Styles.budgetLabel,),
),
Text("£${budget}m", style: Styles.budgetLabel,)
],
),
),
Padding(
padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Row(
children: <Widget>[
Expanded(
child: Text("Points", style: Styles.budgetLabel,),
),
Text("${points}", style: Styles.budgetLabel,)
],
),
),
/* Padding(
padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Column(
children: <Widget>[
Expanded(
child: Text("Next Fixture", style: Styles.budgetLabel,),
),
Text("yyy", style: Styles.budgetLabel,)
],
),
),*/
],
),
)
,
new MaterialButton(
height: 50.0,
minWidth: double.infinity,
color: Styles.colorButton,
splashColor: Colors.teal,
textColor: Colors.white,
child: _saveChanges,
onPressed: () {
if (widget.selectedPlayers.length ==16){
updateRequest(userid, "dhya#hotmail.com", 20, "22", "password", "name", 25.0, widget.selectedPlayers) ;
}
}
),
],
),
],
)
)
);
}
}

Answer 1

You need to call setState when you change your variables which you are trying to show in UI.
I believe you are trying to show one or more of these variables in your UI so wrap it in setState.
setState((){
clubName=club.data.name;
budget=club.data.price;
points=club.data.points;
fixture=club.data.fixture;
});
The reason being when you initialize your variables they are by default null.
And by the time makePostRequest() executes the build method is run and widgets are drawn on the screen with null data. but once the makePostRequest completes execution and you have your variables with your updated data you need to call setState this means when you call setState the build method will be called again to rebuild the widgets with the updated data.
I highly recommend you to play with the flutter counter app in the dartpad to understand how setState works.